如何用CSS实现子元素与父元素的透明度遮罩效果？

核心解决方案 #

用伪元素实现element2的半透明背景，让element1置于伪元素上方独立设置半透明背景，既避免透明度叠加问题，又能保证element1颜色不受父元素背景影响，同时总透明度保持0.8。

代码示例 #

/* 父元素element2 */
.element2 {
  position: relative;
  /* 按需添加宽高、padding等布局样式 */
}

/* 伪元素实现element2的半透明背景 */
.element2::before {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left均设为0 */
  background-color: rgba(200, 200, 200, 0.8); /* 替换为你需要的element2背景色+0.8透明度 */
  z-index: 0;
}

/* 子元素element1 */
.element1 {
  position: relative;
  z-index: 1; /* 确保element1在伪元素背景上方 */
  background-color: rgba(255, 0, 0, 0.8); /* 替换为你需要的element1背景色+0.8透明度 */
  /* 按需添加宽高、margin等布局样式 */
}

原理说明 #

• 将element2的背景与元素本体分离，伪元素的半透明背景不会影响子元素的透明度计算逻辑。
• element1通过层级控制覆盖父元素的伪元素背景，自身的rgba背景直接实现0.8的总透明度，透过它能正常看到后方内容。
• 无需复杂的透明度叠加计算，直接通过层级隔离实现需求，element1的颜色不会因父元素背景而失真。

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