如何用CSS和HTML实现两DIV堆叠，上层半透明调暗下层背景图片

核心思路用相对定位+绝对定位实现两层DIV的堆叠效果，通过RGBA色值控制黑色遮罩的透明度，避免全局透明度继承的问题。

完整代码示例 #

HTML 结构 #

<!-- 外层容器，用来约束内部层的定位范围 -->
<div class="wrap">
  <!-- 下层背景图容器 -->
  <div class="bg-box"></div>
  <!-- 上层黑色半透遮罩 -->
  <div class="dark-overlay"></div>
  <!-- 若需要在遮罩上层放文字/按钮等内容，可加额外内容层，放在结构最后即可 -->
  <div class="content">可在此添加展示内容</div>
</div>

CSS 样式 #

.wrap {
  position: relative;
  width: 100%;
  /* 可根据需求自定义容器高度，比如400px */
  min-height: 600px;
  overflow: hidden;
}

.bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换为你自己的背景图地址 */
  background: url('背景图地址') center/cover no-repeat;
  z-index: 1;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 最后一位是透明度，取值0-1，数值越大遮罩越黑、背景越暗，可自行调整 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* 可选：内容层样式，z-index要高于遮罩层才会显示在最上层 */
.content {
  position: relative;
  z-index: 3;
  color: #fff;
  padding: 2rem;
}

注意事项 #

• 堆叠顺序由z-index控制，数值越高层级越靠上，保证遮罩层的z-index大于背景图层即可
• 不要用opacity属性设置遮罩透明度，会导致遮罩内部所有子元素继承透明度，用rgba的第四个参数控制透明度更灵活
• 外层容器必须设置position: relative，否则内部绝对定位的两层DIV会相对于整个页面定位
• 如果不需要独立的两个DIV，也可以用单容器叠加渐变背景实现更简洁的效果，代码如下：

.single-wrap {
  width: 100%;
  min-height: 600px;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('背景图地址') center/cover no-repeat;
}

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