隐藏 <img src> 并在顶部显示背景图片不起作用

Question

我在隐藏 <img src="/"> 和覆盖媒体 480px 版本的背景图像时遇到问题。

我尝试使用基于的代码，但它对我不起作用。

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 属性允许您一次调整所有可用的背景样式选项，不幸的是，background-image 只能采用图像 url 而不是重复值。

在这里找到更多关于 Background Image and 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> 并在顶部显示背景图片不起作用

Hide <img src> and display background image on top not working

html

css

show-hide