html - 为什么隐藏 child 时背景图像不可见？

Question

我在一个带有主图的网站上工作，我想根据用户使用的是移动设备还是桌面设备以不同方式显示图像。

当用户在桌面上时，我希望 img 元素显示图像，但是当用户在移动设备上时，我希望 img 是hidden 和 img 容器的 background-image 来显示图像。

我遇到的问题是，当 img 元素被隐藏时，容器的 background-image 也不可见，即使它在容器元素。我已经尝试对此问题进行故障排除很长时间了，但无济于事。

我该如何解决这种奇怪的行为？如果需要，我也愿意在更好的实践方面进行任何代码改进 :) 这是 JSFiddle供引用。

HTML:

<div class="header-image-wrapper container-fluid">
     <img src="https://i.pinimg.com/originals/af/2c/2b/af2c2b231f5e8c168f32263842852065.png" class="hide-hero-img" alt="Some image"/>
</div>

CSS:

.header-image-wrapper{
    background-image: url("https://i.pinimg.com/originals/af/2c/2b/af2c2b231f5e8c168f32263842852065.png");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
    
    
@media screen and (max-width: 600px) {
    .header-image-wrapper {
        background-image: url("https://www.kmuw.org/sites/kmuw/files/202009/SuperMario35.png");
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .hide-hero-img {
        display: none;
    }
}

Answer 1

看起来是因为当你隐藏 img元素，.header-image-wrapper现在没有内容，您没有为 width 指定任何大小调整属性( height 和 .header-image-wrapper ) , 因此它的面积为零。

这是由于您隐藏 img 的方式所致元素(带有 display: none; )，这使得它不占用页面空间。相反，您可以制作 img不可见 opacity: 0;并且不可与 pointer-events: none; 交互.这样img是隐藏的，但它的大小，以及它父级的大小，都没有改变。

这是一个例子:

你目前拥有的:

.image-wrapper {
  background-image: linear-gradient(red, blue);
}

.image-wrapper img {
  display: none;
}

<div class="image-wrapper">
  <img width="40" height="30"/>
</div>

解决方法:

.image-wrapper {
  background-image: linear-gradient(red, blue);
}

.image-wrapper img {
  opacity: 0;
  pointer-events: none;
}

<div class="image-wrapper">
  <img width="40" height="30"/>
</div>