如何删除背景图像的边框

Question

我正在使用 background-image 来显示图像，但它在图像周围放置了一种边框，我无法摆脱它。

我怎样才能做到这一点？

 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>

谢谢

原文由 user3242861 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 src="" 属性代替 background-image

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

一个 糟糕 的解决方案是使用 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="" 属性 -bots图片。透明像素显然不值得 Alt ernative 属性。

所以

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 Preview 内部版本 16215 中包含的 Microsoft Edge 中提供的对象适合/对象位置。

或者使用谷歌并 进行研究 以寻找简洁的后备方案。

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 content css 属性对我有用：

CSS

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

网页格式

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

JSFiddle

原文由 cider 发布，翻译遵循 CC BY-SA 4.0 许可协议