如何去除background-image的边框

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

Answer 1

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

当您未提供有效的src=""属性或无法找到图像时，通常会得到损坏的图像资源的边框。

一个不好的解决方案是使用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)。

因此，

1. 使用 <img src="image.jpg" alt="漂亮的绿色自然">

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

如果您使用了 <img> 但需要实现 cover 类似于 background-size: cover; 的效果……

请使用 object-fit: cover;

Opera Mini 已经支持该特性，因此您可以期待IE/Edge也将（最终）实现这个功能。

object-fit/object-position 已经在 Microsoft Edge 中发布，包含在 Windows Insider Preview build 16215 中。

或者使用 Google 进行研究，寻找好的回退方案。

- Roko C. Buljan

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

- cider

---

简单而优雅的解决方案。这对我也适用于base64图像。img.my-img { content:url("data:image/webp;base64,UklG..."); - Cem Polat

Answer 3

标签需要一个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;
}

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

- Scott

Answer 4

您可以将img更改为div并添加以下内容：

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

JSFiddle

- InvincibleM