如何在CSS中去掉图像周围的边框？

Question

我尝试在鼠标指针悬停在帮助图标上时显示一个 <span>。

这个方法有效，但是我仍然无法去掉图标周围的边框。

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

- bahamut100

---

如果你想要移除圖像周圍的邊框，為什麼不直接移除圖像周圍的邊框呢？.info img {} - Boldewyn

建议使用 div 标签代替 img 标签。 - user2606357

可能是重复的问题：<img> inside <a> gets blue border - Dave Jarvis

@DaveJarvis：这不是重复的，之前已经有人问过了。 - vitaut

Answer 1

还有一件事 - 请记住，如果您有一个带有空 src属性的，那么这些建议都将无效，边框仍然会显示。

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

- Mike Gledhill

---

src="" 会让优秀的浏览器向您的页面发出第二个请求，因为它是请求带有图像接受标头的当前 URL 的简写。 - Jeff

对我来说这很好用 <img width="30" height="30"/> - Sajid Mehmood

Answer 2

试试这个：

img{border:0;}

你还可以限制范围，只对某些图像去除边框，具体做法如下：

.myClass img{border:0;}

有关边框css属性的更多信息可以在此处找到。

编辑：将边框从0px更改为0。 根据评论中的解释，对于单位为0，px是多余的。

- marcgg

---

我将在某处使用“limitate”。 - random

“border: 0px” 是消除边框的方式（而不是 “border: none”）！ - Veger

优化方面，border: 0不需要加上'px'。 - guzart

@uberneet：没错。我喜欢添加px，这样以后如果我想动态增加大小，在firebug中更改就很容易了。我编辑了我的答案并提到了它。 - marcgg

所有浏览器和所有移动设备都不是100％！请查看我的回复。 - KingRider

Answer 3

图片需要有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">

LOL... CSS crazy! Good fun

- KingRider

---

这是唯一对我有效的解决方案。谢谢。 - Let A Pro Do IT

谢谢。它也解决了我的问题，但我仍然不理解它的逻辑。 - Mert S. Kaplan

Answer 4

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

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

希望这能帮到你。

- pixeltocode

---

border:none; 对我没有帮助。我需要outline:none; 谢谢，大师pixeltocode - The girl with red hair

Answer 5

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

- The Finest Artist

Answer 6

<img style="border:0;outline:none" width="200" height="200"
    src="this-image-dont-exists.png"
    data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
    onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
 

如果图像没有src或图像URL未返回图像，则边框将存在，因此您必须设置一个空但有效的图像，这里是一个示例，在图像加载错误时将加载默认图像。

<img style="border:0;outline:none" width="200" height="200"
    src="this-image-dont-exists.png"
    data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
    onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />

 

- surinder singh

Answer 7

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

- PradnyaK

Answer 8

使用：

div {
  background: url()
}

使用背景图片的

标签代替标签。

标签中没有边框。

- diesel94

Answer 9

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

对我有用（针对Chrome）。这也会删除alt图标，需要注意。

- sojin

Answer 10

我知道这是一篇很老的帖子，但我遇到了一个类似的问题，我的显示图像始终有一个边框。我试图用单个图像填充浏览器窗口。添加样式如border:none;未能去除边框，margin:0;或padding: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;">

希望这篇文章能帮助到有类似问题的人。

- Sassan Sanei