如何在没有源的情况下删除图像周围的边框？

Question

我有一个图像,我还没有定义源.它有边框:/

例如: <img src="" />

如果我给它一个源,边界就会消失(由于css :) border:none.

如果图像没有来源,如何删除图像周围的边框？

Answer 1

我可以建议的是,如果没有src =""删除它,你可以

img {
    display: none;
}


img[src] {
   display: block;
 }

或者如果您知道该网址包含一些特殊字词,例如http,您可以这样做:

img[src*="http"] {
    display: block;
}

Answer 2

<img src="" width=50 height=50>

上面显示的损坏的图像占位符和后续边框是浏览器功能,无法设置样式.

您可以通过隐藏图像来解决此限制,或者如果您需要布局,则可以使用占位符图像或透明像素.

隐藏图像

img[src=""] { display: none; }

使用占位符图像或透明像素

img[src=""] { content:url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }

Answer 3

带有数据的图像:URL src属性

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

根据您所需的浏览器支持,您还可以:

img[src=""] {
  content:url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}

请参阅:http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

Answer 4

我建议使用 text-indent: 100vw;

.logo {
  text-indent: 100vw;
}

<img class="logo" src="" alt="my logo" />

Answer 5

这是我的解决方案，即使图像没有 [src] 属性（例如 lozad.js）也可以工作。使用不透明度保留空间。

// prevent borders around images without [src] value/attribute
img[src=""],
img:not([src]){
  opacity: 0;
}

img[src="*"]{
  opacity: 1;
}

Answer 6

visibility: hidden;保持图像的空间为空。 display: none;完全隐藏图像，没有保留空间