html - 如何删除背景图像的边框

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>

谢谢

Answer 1

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

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

BAD 解决方案是使用 1x1 透明像素 - 或者同样是 base64 representation of the same :

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原生属性。

因此

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 很快也会 ( eventually ) 实现该功能。

object-fit/object-position shipped in Microsoft Edge included in Windows Insider Preview build 16215.

或使用谷歌和do a research用于整洁的后备。