如何在css中删除图像周围的边框？答案

【问题标题】：How remove border around image in css?如何在css中删除图像周围的边框？
【发布时间】：2021-08-08 07:27:49
【问题描述】：

当鼠标光标位于帮助图标上时，我尝试显示跨度。

它可以工作，但是我没有设法删除图标周围的边框。

我的 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;
}

光盘

【问题讨论】：

如果你想去掉图片周围的边框，为什么不直接去掉图片周围的边框呢？ .info img {}
尝试使用div而不是img标签
<img> inside <a> gets blue border 的可能重复项
@DaveJarvis：这不是重复的，之前有人问过。

标签： html css

【解决方案1】：

另一件事 - 请记住，如果您有一个 empty src 属性，那么这些建议都不起作用，边框将仍然显示。

<img src="" style="width:30px;height:30px;">

【讨论】：

also src="" 将导致一个好的浏览器向您的页面发出第二个请求，因为它是请求当前 url 的简写，并带有一个接受图像的标头。
对我来说效果很好

【解决方案2】：

试试这个：

img{border:0;}

您还可以通过这样做来限制范围并仅删除某些图像的边框：

.myClass img{border:0;}

有关边框 css 属性的更多信息，请参阅here。

编辑：将边框从 0px 更改为 0。正如 cmets 中所解释的，px 对于0 的单元是多余的。

【讨论】：

我将在某处使用“limitate”。
border: 0px 是去除边框的方式（而不是border: none）！
在优化边框方面：0 不需要'px'
@uberneet ：是的。我喜欢添加 px 以便在 firebug 中轻松更改，以防我以后想动态增加大小。我编辑了我的答案以提及它认为
所有浏览器和所有手机都不是100%！查看我的回复

【解决方案3】：

img 需要 src 使用边框是卸妆，我不知道为什么 css 很疯狂

data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7

所以试试 SRC 的例子：

img.logo {
	width: 200px;
    height: 50px;
	background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

&lt;img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7"&gt;

所以试试不带 SRC 的例子：

img.logo {
	width: 200px;
    height: 50px;
	background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

&lt;img class="logo"&gt;

大声笑... css 疯狂！很好玩

【讨论】：

这是唯一对我有用的解决方案。谢谢
谢谢。它也解决了我的问题，但我仍然不明白它的逻辑。

【解决方案4】：

使用重置 CSS 是个好主意。将此添加到 CSS 文件的顶部

img, a {border:none, outline: none;}

希望对你有帮助

【讨论】：

边框：无；没有帮助我。我需要大纲：无；谢谢，像素编码大师

【解决方案5】：

<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

【讨论】：

【解决方案6】：

我在使用 img 标签时遇到了类似的问题我添加了以下带有 img 标签的行。

<img class="my-class">

这是css类

.my-class{
    background-image: url('add.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 27px;
    height: 27px;
}

我将 img 标签更改为具有相同 css 类的 span 标签。边框现在不可见。

<span class="my-class"></span>

【讨论】：

【解决方案7】：

用途：

div {
  background: url()
}

而不是<img>。带有背景图片的 div 中没有边框。

【讨论】：

【解决方案8】：

可以在a.info:hover span 或text-decoration:none 下添加border:none

【讨论】：

【解决方案9】：

我意识到这是一篇非常古老的帖子，但我遇到了类似的问题，我显示的图像周围总是有边框。我试图用单个图像填充浏览器窗口。添加类似边框的样式：无；没有删除边框，margin:0 也没有；或填充：0；或三者的任意组合。

但是，添加 position:absolute;top:0;left:0;解决了这个问题。

上面的原帖有 position:absolute;但没有 top:0;left:0;这是在我的页面上添加默认边框。

为了说明解决方案，它有一个白色边框（准确地说，它有一个顶部和左侧偏移）：

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">

这没有边框：

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">

希望这可以帮助找到此帖子并希望解决类似问题的人。

【讨论】：

【解决方案10】：

你在图片标签上有什么类？

试试这个

<img src="/images/myimage.jpg" style="border:none;" alt="my image" />

【讨论】：

【解决方案11】：

这就是我摆脱我的方法：

.main .row .thumbnail {
    display: inline-block;
    border: 0px;
    background-color: transparent;
}

【讨论】：

【解决方案12】：

感谢您的回答，

IE 的边框被移除，但 Firefox 的边框被移除。

所以，我将这个类添加到img：

.clearBorder{border:none;}

它成功了！

【讨论】：

【解决方案13】：

另外，在您的 html 中，请记住删除结束标记和开始标记之间的所有空格/换行符/制表符。

<img src='a.png' /> <img src='b.png' /> 将始终在图像之间显示一个空格，即使边框属性设置为 0，而 <img src='a.png' /><img src='b.png' /> 不会。

【讨论】：

【解决方案14】：

img {
  text-indent: -20000px; /*some large value*/
}

为我做了诀窍（对于 Chrome）。这也会删除alt 图标，需要注意。

【讨论】：

【解决方案15】：

试试这个

<img width="30" height="30"/>

【讨论】：

问题要求使用 CSS 来完成。

【解决方案16】：

我相信您也需要为您的图标元素添加边框：无样式。

【讨论】：

【解决方案17】：

我通常在 css 文件的顶部使用它。

img {
   border: none;
}

【讨论】：

不知道为什么这个答案被否决了，请考虑在你对答案投反对票时发表评论。顺便说一句，0 和 none 这两个值都是完全有效的。
投了反对票，因为它的答案错误。检查示例并在发布前尝试。这里的“Border: none”对于这个奇怪的事件是没用的
@denismart 怎么样？接受的答案实际上是相同的。