如何删除背景图像的边框

Question

我正在使用背景图像来显示图像,但它在图像周围放置了一种边框,我无法将其取出.

我怎样才能做到这一点？

body
{
  background-color: grey;
}
.footer-red-bar
{
  width: 100%;
  height: 180px;
  margin: 0 auto;
  margin-top: 2em;
}

.footer-red-bar img
{
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="footer-red-bar">
  <img style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)"/>
</div>

谢谢

Answer 1

使用src=""属性而不是background-image

这是您在未提供有效属性且无法找到图像时获得的Broken-Image资产的常用边框src="".

甲BAD解决方案是使用一个1x1透明像素-或同等一个相同的Base64表示:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

比它看起来像:

body{
  background-color: grey;
}

.footer-red-bar{
  width: 100%;
  height: 180px;
  margin: 0 auto;
  margin-top: 2em;
}

.footer-red-bar img{
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="footer-red-bar">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
       style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)"/>
</div>

但这不是做到这一点的方法.

img元素不仅需要通过src=""属性的有效图像源,还需要alt=""属性 - 它向搜索引擎机器人和屏幕阅读器解释图像的主题.透明像素显然不值得Alt nnative属性.

因此

1. 用你的 <img src="image.jpg" alt="Nice green nature">

2. 或使用 <div style="background-image='url(image.jpg)'"></div>

如果您使用<img>但需要cover翻译,就像它完成background-size: cover;...

使用 object-fit: cover;

Opera Mini拥有它,所以你很快就会看到IE/Edge将(最终)实现该功能.

Windows Insider预览版本16215中包含的Microsoft Edge中附带的对象适合/对象位置.

或者使用谷歌并进行研究以获得整洁的后备.

Answer 2

使用 content css 属性对我有用：

CSS

img.my-img {
  content: url(https://www.w3schools.com/css/trolltunga.jpg);
}

html

<div>
  <img class="my-img"/>
</div>

JSFiddle