Question

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

虽然有效，但是我无法移除图标周围的边框。

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

Answer 1

试试这个：

img{border:0;}

您还可以限制范围，只删除某些图像上的边框：

.myClass img{border:0;}

有关border css属性的更多信息可以找到here。

修改：将边框从0px更改为0。正如评论中所解释的那样，px的单位0是多余的。

Answer 2

另一件事 - 请记住，如果您的空 src属性，那么这些建议都不起作用，边框仍会显示

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

Answer 3

img需要src使用border是卸妆，我不知道为什么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;
}

<img class="logo" src="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;
}

<img class="logo">

大声笑......疯狂！很有趣

Answer 4

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

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

希望这会有所帮助

Answer 5

我意识到这是一个非常古老的帖子，但我遇到了类似的问题，其中我显示的图像总是有一个边框。我试图用一个图像填充浏览器窗口。添加border：none等样式;没有删除边框，也没有删除边距：0;或填充：0;或三者的任意组合。

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

上面的原帖有位置：绝对;但没有顶部：0;左：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;">

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

Answer 6

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

Answer 7

试试这个

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

Answer 8

使用：

div {
  background: url()
}

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

Answer 9

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

对我有用（对于 Chrome）。这也将删除 alt 图标，注意事项。

Answer 10

我也遇到了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>

Answer 11

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

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

Answer 12

这是我摆脱我的方式：

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

Answer 13

感谢答案，

Internet Explorer的边框已删除，但这适用于Firefox。

因此，我将此课程添加到img：

.clearBorder{border:none;}

它有效！

Answer 14

可能会在border:none或a.info:hover span

下添加text-decoration:none

Answer 15

您对图片代码有哪些课程？

试试这个

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

Answer 16

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

img {
   border: none;
}

Answer 17

我相信你需要为你的icon元素添加border：none样式。

如何删除CSS中的图像边框？

17 个答案: