如何删除背景图像的边框

Question

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

我该怎么做？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

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

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

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

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

比它看起来像：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但那不是这样做的。

img元素不仅需要通过 src="" 属性获得有效的图片来源，还需要alt=""属性 - 这可以向搜索引擎机器人和屏幕解释读者是图像的主题。透明像素显然不值得 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; ...

使用img

Opera Mini拥有它，所以你很快就可以期待IE / Edge将（eventually）实现该功能。

  

Windows Insider Preview build 16215中包含的Microsoft Edge中的对象适合/对象位置。

或者使用Google和do a research进行简洁的回退。

Answer 2

src代码需要body { background-color: grey; border: none; } .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; }属性。加载透明图像作为源，边框将消失。

＆＃13;

＆＃13;

<div class="footer-red-bar">
  <img style="background-image: url(https://www.w3schools.com/css/trolltunga.jpg)" src="http://antonandirene.com/build/images/about/snow-small.png" />
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用内容CSS属性对我有用：

css

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

html

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

JSFiddle

Answer 4

您还可以将img更改为div并添加：

div.img {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  border:none;
}

JSFiddle