Html 如何在css中删除图像周围的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2153425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How remove border around image in css?
提问by bahamut100
I try to display a span when the cursor of the mouse is on a help icon.
当鼠标光标位于帮助图标上时，我尝试显示跨度。
It works, but nevertheless, I don't manage to remove the border around the icon.
它有效，但尽管如此，我还是无法删除图标周围的边框。
My CSS :
我的 CSS ：
.info{
position:absolute;
border:none;
}
a.info{
position:absolute;
z-index:24;
background:none;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF;
cursor:help;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
cursor:help;
bottom:0px;
left:26px;
width:150px;
padding:4px;
}
cd
光盘
回答by Mike Gledhill
Another thing - remember that if you have an with an emptysrcattribute, then none of these suggestions will work, a border willstill get shown.
另一件事-记住，如果你用有一个空的src属性，那么这些建议都将工作，边框将仍然得到显示。
<img src="" style="width:30px;height:30px;">
回答by marcgg
Try this:
尝试这个：
img{border:0;}
You can also limitate the scope and only remove border on some images by doing so:
您还可以通过这样做来限制范围并仅删除某些图像的边框：
.myClass img{border:0;}
More information about the border css property can by found here.
可以在此处找到有关边框 css 属性的更多信息。
Edit: Changed border from 0pxto 0. As explained in comments, pxis redundant for a unit of 0.
编辑：将边框从 更改0px为0. 正如评论中所解释的，px对于一个单位来说是多余的0。
回答by KingRider
img need src to use border is remover, i no know a why css is crazy
img 需要 src 才能使用边框是去除剂，我不知道为什么 css 很疯狂
data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
So try example with SRC:
因此，请尝试使用 SRC 示例：
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">So try example without SRC:
所以试试没有 SRC 的例子：
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}<img class="logo">lol... css crazy! good fun
大声笑... css 疯了！好开心
回答by pixeltocode
it's a good idea to use a reset CSS. add this at the top of your CSS file
使用重置 CSS 是个好主意。将此添加到 CSS 文件的顶部
img, a {border:none, outline: none;}
hope this helps
希望这可以帮助
回答by Sassan Sanei
I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.
我意识到这是一篇很老的帖子，但我遇到了一个类似的问题，其中我显示的图像总是有一个边框。我试图用单个图像填充浏览器窗口。添加诸如边框之类的样式：无；没有删除边框，也没有删除 margin:0; 或填充：0; 或三者的任意组合。
However, adding position:absolute;top:0;left:0; fixed the problem.
但是，添加 position:absolute;top:0;left:0; 解决了这个问题。
The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.
上面的原帖有 position:absolute; 但没有 top:0;left:0; 这是在我的页面上添加默认边框。
To illustrate the solution, this has a white border (to be precise, it has a top and left offset):
为了说明解决方案，它有一个白色边框（准确地说，它有一个顶部和左侧的偏移量）：
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">
This does not have a border:
这没有边界：
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">
Hopefully this helps someone finding this post looking to resolve a similar problem.
希望这有助于有人找到这篇文章以解决类似的问题。
回答by jkeesh
maybe add border:noneto under a.info:hover spanor text-decoration:none
也许添加border:none到下a.info:hover span或text-decoration:none
回答by The Finest Artist
<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
回答by Joachim Kruyswijk
Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.
此外，在您的 html 中，请记住删除结束标记和开始标记之间的所有空格/换行符/制表符。
<img src='a.png' /> <img src='b.png' />will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' />will not.
<img src='a.png' /> <img src='b.png' />即使边框属性设置为 0，<img src='a.png' /><img src='b.png' />也将始终显示图像之间的空格，而不会。
回答by Johnny Bahbuh
Here's how I got rid of mine:
这是我摆脱我的方法：
.main .row .thumbnail {
display: inline-block;
border: 0px;
background-color: transparent;
}
回答by Andrew
What class do you have on the image tag?
你在图像标签上有什么课？
Try this
尝试这个
<img src="/images/myimage.jpg" style="border:none;" alt="my image" />
