嵌套div子元素如何实现延续body的background-image背景效果

要让嵌套在半透明背景父级内的子区域显示连续对齐的body背景，直接给子元素设置和body完全一致的背景，同时添加background-attachment: fixed属性即可。
该属性会让背景相对于视口固定，子元素的背景会和body背景完全重合，视觉上呈现出穿透父级、背景连续的效果，不需要复杂的定位或遮罩处理，兼容性覆盖所有主流浏览器。

核心修改点 #

• 移除子元素（.lvl3）原本的白色背景
• 给.lvl3配置和body完全相同的背景图，添加background-attachment: fixed保证对齐
• 可通过CSS变量统一存储背景图地址，避免重复书写、降低维护成本

完整修改后代码 #

CSS部分 #

* {
  box-sizing: border-box;
}

/* 统一存储背景地址，方便维护 */
:root {
  --page-bg: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c174349ca3/200000014-608bd61835/27122266-blood-wallpapers.jpg?ph=697a238450');
}

body {
  background-image: var(--page-bg);
  color: white;
}

.lvl2 {
  margin: 30px 8px;
  padding: 15px;
  background-color: #99000090;
}

.lvl3 {
  margin: 0;
  padding: 10px;
  background-image: var(--page-bg);
  background-attachment: fixed;
}

#img-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

#image {
  width: 900px;
}

HTML部分 #

<main id='main'>
  <div class='lvl2'>
    <h1 class='center' id='Sukuna'>Ryomen Sukuna</h1>
    <p class='center'></p>
    <div class='lvl3'>
      <div id="img-div">
        <img src='https://i.pinimg.com/originals/dd/03/04/dd03044d67c493a3514b1fe8f8c42cff.gif' id='image'>
      </div>
    </div>
    <div id='tribute-info'>
      <ul>
        <li>Main Info</li>
        <li>Personality</li>
        <li>Abilities and Powers</li>
      </ul>
      <p>If you wanna know more about him see this page</p>
    </div>
  </div>
</main>

注意：如果body的背景设置了background-size、background-repeat、background-position属性，子元素的背景需要配置完全相同的参数，才能保证背景完全对齐无错位。

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