Question

我的img边框有问题。我对我的所有图像使用以下代码，但边框不会消失。有人能告诉我删除img边框的正确方法吗？

   <div class="mosaic-overlay">
   <img class="cover1"></div>

   .cover1  {width:300px;height:185px;
            float:left;background: url('/img/cover.jpg') 0px 0px; 
            border:0;}

非常感谢。

埃里克

Answer 1

当img元素没有src属性或src属性指向不存在的图像时，这是某些浏览器中显示的默认“特殊”边框。< / p>

例如，请在IE9中查看：http://jsfiddle.net/SdbNE/

常见的解决方法是将src设置为blank.gif file：

<img class="cover1" src="blank.gif" />

或者，只需使用div？

<div class="cover1"></div>

Answer 2

将<img>来源设为透明。

#img {
  width:150px;
  height:auto;
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;
  background-size: cover;
}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

请注意，img src为空白且没有边框，但CSS设置了background: url()

透明src：data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

信用CSS Tricks

Answer 3

它是替代文字的边框，请尝试

＆＃13;

img {
  text-indent: -999px;
}

＆＃13;

Answer 4

我使用该Java脚本技巧，用空白图像初始化所有图像源。

onload=
var myImagesList =
document.getElementById("element where the images are").getElementsByTagName("img");

for (i=1;i < myImagesList.length-1;i++)
{
myImagesList[i].src = ".../blank image";
}

删除img边框

4 个答案: