在CSS布局里，我们经常会碰到这样的结构：父容器带着渐变背景，里面有几个兄弟元素，现在想放一个背景透明的层把它们挡住，却又不希望完全看不见渐变。很多人第一反应是给遮挡层写background: transparent，结果兄弟元素照样露出来。这是因为透明背景并没有任何绘制行为，它不会向合成器提交不透明像素，自然盖不住下面的内容。
为什么透明背景无法遮挡兄弟元素
浏览器渲染时，每个元素按层叠顺序绘制。如果某个元素背景是transparent，它在该区域根本不生成任何颜色像素，兄弟元素在自己所在的层正常画出后，用户依然能看到它们。透明不等于“看不见的墙”，它只是“什么都不画”。
要形成遮挡，遮挡层必须在对应区域产生不透明（或半透明但参与合成）的像素。常见误区是以为visibility或背景透明能隐去下方，其实只有真实像素覆盖或混合模式改变才能影响最终成像。理解这一点，才能选对技术方案。
方案对比：三种可行思路
方案一：用opacity创建半透明遮挡层
给遮挡层设置opacity小于1且大于0，浏览器会为它建立独立合成层，并将该层所有内容（包括透明背景区域）按透明度与下方合成。此时即使背景透明，整层也会以半透明方式盖住兄弟元素，渐变透出来但兄弟被弱化。
这种写法最简单，但缺点是层内所有子元素也会一起变淡。如果遮挡层只是空容器，那正好；若里面有文字，文字也会被透明化，需要额外结构处理。
<div class="wrap">
<div class="gradient">渐变底</div>
<div class="sibling">兄弟内容</div>
<div class="mask"></div>
</div>
<style>
.wrap { position: relative; width: 300px; height: 200px; }
.gradient {
position: absolute; inset: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
.sibling {
position: absolute; top: 40px; left: 40px;
color: #333;
}
.mask {
position: absolute; inset: 0;
background: transparent;
opacity: 0.6;
}
</style>
方案二：伪元素加半透明白底
如果不想让整个层透明，可以用伪元素::before铺一层rgba白色，自身背景仍透明。这样兄弟元素被伪元素遮住，而主层可放不透明的UI，互不干扰。
该方式灵活度最高，也最容易控制遮挡程度。下面示例中，伪元素用rgba(255,255,255,0.7)盖住渐变和兄弟，主层可写操作按钮而不被淡化。
.card { position: relative; width: 300px; height: 200px; }
.card::before {
content: "";
position: absolute; inset: 0;
background: rgba(255,255,255,0.7);
z-index: 1;
}
.card .sibling { position: relative; z-index: 0; }
.card .action { position: relative; z-index: 2; }
方案三：mix-blend-mode实现特殊遮罩
当希望遮挡层“滤掉”兄弟颜色而非简单盖白，可用mix-blend-mode。例如遮挡层用白色加screen模式，会让下方变亮甚至看不见深色文字，形成视觉遮挡且保留渐变亮度。
此方案适合艺术化遮罩，但兼容性需注意，且在复杂背景上效果难预测，建议先做小范围测试。
.cover {
position: absolute; inset: 0;
background: #fff;
mix-blend-mode: screen;
}
如何选对方案
如果只需弱化兄弟元素且遮挡层无内容，opacity最省事；若遮挡层要承载不透明控件，伪元素法更稳；做视觉特效再考虑混合模式。核心记住：透明背景不遮挡，必须产生像素或混合行为才能盖住渐变上的兄弟。
| 方案 | 是否淡化子元素 | 适用场景 |
|---|---|---|
| opacity层 | 是 | 纯遮罩浮层 |
| 伪元素白底 | 否 | 带按钮的卡片遮罩 |
| 混合模式 | 视模式 | 艺术化遮挡 |
完整示例
下面给出一个可直接运行的页面，演示伪元素法在渐变背景上遮挡兄弟文字，同时保留操作按钮清晰。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<style>
.box {
position: relative;
width: 320px; height: 220px;
background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
overflow: hidden;
}
.box::before {
content: "";
position: absolute; inset: 0;
background: rgba(255,255,255,0.75);
z-index: 1;
}
.txt {
position: relative; z-index: 0;
padding: 20px; color: #222;
}
.btn {
position: relative; z-index: 2;
margin: 10px 20px;
padding: 8px 14px;
border: none; background: #007bff; color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="txt">这是渐变上的兄弟文字，将被遮挡层盖住。</div>
<button class="btn">可见按钮</button>
</div>
</body>
</html>
通过上述方法，你可以精准控制透明层对渐变背景中兄弟元素的遮挡效果，既保留视觉层次，也满足交互需要。