Question

我在隐藏<img src="/">时遇到问题，并将背景图片覆盖在媒体480px版本上。

我尝试使用基于CSS background image on top of <img>的代码，但这对我不起作用。

HTML

<div class="j_img-overlay">
    <img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>

CSS

.j_img-overlay {
   width: 100px;
   height: 100px;
}

.j_img-overlay img {
   background-size: auto;
   background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
   position: relative;
   box-sizing: border-box;
   width: 100px;
   max-width: 100px;
   z-index: 100;
   }

Answer 1

首先，<img/>元素不应显示背景图像。此外，只有背景属性允许您一次调整所有可用的背景样式选项，不幸的是，背景图像只能采用图像网址而不是重复值。

在此处详细了解Background Image和Background css属性。

要使叠加层正常工作，您可以使用绝对定位的伪元素（之前，之后）来填充图像元素的容器。容器需要相对位置以避免伪元素泄漏（具有我们定义的绝对位置）。

在此处详细了解Pseudo Elements - CSS。

工作示例：

.j_img-overlay {
  position: relative;
  width: 100px;
}
.j_img-overlay::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
  background-size: cover;
}

.j_img-overlay img {
  display: block;
  width: 100%;
}

<div class="j_img-overlay">
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>

隐藏<img src=""/>并在顶部显示背景图片无效

1 个答案: