页面body背景图穿透元素，如何让指定元素完全不透明？

问题根源 #

你之前给body设置了opacity: 0.8，这个属性会让整个body及其所有子元素都变成半透明状态，所以即便给汽车图片的容器加了白色背景，也会透出下方的body背景图。

具体修改步骤 #

1. 移除body的opacity属性，改用背景图半透明效果
   删掉body的opacity: 0.8，换成给背景图叠加一层半透白色遮罩，这样既保留背景图的半透视觉效果，又不会影响子元素的透明度：

   body {
     background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('https://images.unsplash.com/photo-1739538475083-43bbf5c47646?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MDkzMDB8&ixlib=rb-4.0.3&q=80&w=400');
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
   }
   

   这里的rgba(255,255,255,0.2)表示添加一层20%不透明的白色遮罩，视觉效果和原来的opacity:0.8接近，你可以根据需要调整alpha值（0-1之间）。

2. 给汽车图片所在容器添加不透明背景
   给包裹汽车图片的.left容器添加专属类名，避免影响其他.left元素，再设置白色背景挡住下方背景图：

   .left.image-container {
     background-color: white;
     padding: 0; /* 可选，去掉内边距让图片贴合容器 */
   }
   

   对应修改HTML：

   <div class='left image-container'>
     <img height=200px width=200px src='https://images.unsplash.com/photo-1739961097716-064cb40a941e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MTEzNzh8&ixlib=rb-4.0.3&q=80&w=400' alt='汽车图片'>
   </div>
   

修改后的完整代码 #

CSS

body {
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('https://images.unsplash.com/photo-1739538475083-43bbf5c47646?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MDkzMDB8&ixlib=rb-4.0.3&q=80&w=400');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.outer {
  width: 60%;
  height: 400px;
  margin: auto;
  background: white;
  padding-top: 2rem;
}

.inner {
  width: 30%;
  height: 50%;
  margin: auto;
  text-align: center;
  display: flex;
}

.top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 3rem;
  width: 40%;
  margin: auto;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  font-size: 200%;
  background: white;
  text-align: center;
}

.left {
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.left.image-container {
  background-color: white;
  padding: 0;
}

HTML

<body>
  <div class='top'>
    This is the top
  </div>
  <div class='outer'>
    <div class='inner'>
      <div class='left'>
        Inner
      </div>
      <div class='left image-container'>
        <img height=200px width=200px src='https://images.unsplash.com/photo-1739961097716-064cb40a941e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MTEzNzh8&ixlib=rb-4.0.3&q=80&w=400' alt='汽车图片'>
      </div>
    </div>
  </div>
</body>

额外说明 #

如果不需要背景图的半透效果，直接移除body的opacity属性即可，这样背景图完全不透明，子元素只要设置不透明背景就能挡住它。

内容的提问来源于stack exchange，提问作者Tony Suffolk 66