CSS技术求助：如何让带opacity的背景图铺满整页高度

嘿，我来帮你搞定这个背景图的困扰！你现在遇到的问题是，当页面内容超过视口高度时，背景图只停留在视口范围内，没法跟着页面一起延伸。这是因为你给#back-img设置的height:100%只会继承父元素的初始高度（也就是视口高度），当内容变长时，父元素没有被撑开，背景图自然不会跟着长高。

给你几个关键的修改点，保证背景图能铺满整个页面高度：

• 调整html和body的高度规则：把html的height:100%去掉，保留min-height:100%；给body加上min-height:100%和position:relative，这样body会跟着内容自动拉伸，同时成为绝对定位元素的父容器。
• 重构背景图容器的样式：把#back-img的height:100%改成min-height:100%，再加上top:0和bottom:0，让它自动填充父元素（body）的整个高度；去掉width:100%，改用background-size: auto 100%，让图片按高度铺满、宽度自适应缩放。
• 调整内容容器的定位：#content不需要绝对定位，用默认的静态定位或者相对定位就行，这样内容能正常撑开页面高度，背景图也能跟着延伸。

下面是修改后的完整代码：

CSS 代码 #

html {
  min-height: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  position: relative;
}
#back-img {
  background: url(https://youngisland.com/wp-content/uploads/2018/01/aerial-optimized2.jpg);
  background-size: auto 100%; /* 按高度铺满，宽度自适应 */
  position: absolute;
  top: 0;
  bottom: 0; /* 关键：让元素填充父元素的上下高度 */
  left: 0;
  z-index: -1;
  opacity: 0.8; /* 这里可以设置你需要的透明度 */
}
#content {
  padding: 20px; /* 加内边距避免内容贴边 */
}

HTML 代码 #

<div id="content">
  <h1>Title</h1>
  <h2 style="font-size:50px">MORE</h2>
  <!-- 可以添加更多内容测试页面拉伸效果 -->
  <p>测试内容</p>
  <p>测试内容</p>
  <p>测试内容</p>
  <p>测试内容</p>
  <p>测试内容</p>
</div>
<div id="back-img"></div>

这样修改后，不管你的内容有多长，背景图都会一直铺满整个页面的高度，宽度也会按图片比例自适应显示。你可以根据需求调整opacity的值，或者修改background-size的参数来微调图片的展示效果~

内容的提问来源于stack exchange，提问作者abc