在网页开发中，做一个带半透明背景的卡片、弹窗或者导航栏是非常常见的需求。但很多人一上来就给容器写了opacity: 0.5，结果发现背景变透明的同时，容器里的文字、图片也跟着变淡了，整个模块看起来灰蒙蒙的，可读性极差。要解决这个问题，先得弄清楚为什么opacity会影响子元素，再选择合适的替代方案。
为什么opacity会让子元素也变透明
按照CSS规范的定义，opacity属性作用于整个元素以及它的所有后代内容。浏览器在渲染时，会把设置了opacity的元素连同其子树当作一个整体（可以理解为一个合成层），先把这个整体渲染成一张位图，再对这张位图应用透明度混合。所以它不是只作用于背景色，而是作用于"这个元素呈现出来的一切内容"。
这也解释了一个常见现象：即使你在子元素上写opacity: 1，也无法把子元素恢复成完全不透明。因为透明度是在父级整体渲染完成后统一应用的，子元素的opacity值无法反向抵消父级的透明效果，这一点跟color、font-size这类可继承属性完全不同。
理解了这个机制，解决思路就清晰了：要么只让背景本身透明（用rgba颜色），要么把背景单独拆出去作为一层，让它和内容互不干扰。
方案一：使用rgba或hsla颜色值（推荐首选）
如果只是想让背景半透明，最直接的办法就是把背景色从十六进制写法改成rgba写法，把透明度写进颜色值里。rgba的第四个参数只影响这一个颜色本身，不会传导到子元素。现代浏览器全部支持，IE9及以上也支持，是绝大多数场景的首选方案。
.card {
background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50%透明度 */
color: #fff; /* 文字完全不透明 */
padding: 24px;
}
/* 如果背景是渐变色，hsla同样适用 */
.banner {
background: linear-gradient(
to right,
hsla(210, 80%, 40%, 0.6),
hsla(260, 80%, 50%, 0.6)
);
}
这种写法的局限在于它只能处理纯颜色背景。如果背景是一张图片、一段视频或者复杂的复合背景，rgba就无能为力了，这时候需要用后面提到的伪元素方案。
另外注意rgba里的透明度和opacity的取值含义相反：数值越小越透明，rgba(0,0,0,0.5)表示半透明，而opacity: 0.5也是半透明，两者数值上是一致的，都取0到1之间的小数。
方案二：伪元素叠加实现背景透明
当背景是图片或者需要复杂效果时，可以用一个绝对定位的伪元素充当背景层，把透明度设置在这个伪元素上，内容则放在正常文档流中，两者互不影响：
.overlay-card {
position: relative;
z-index: 1; /* 确保内容层级在伪元素之上 */
}
.overlay-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/bg.jpg) center/cover no-repeat;
opacity: 0.4; /* 只作用于伪元素，即背景层 */
z-index: -1; /* 压到内容后面 */
}
这个方案的原理很简单：伪元素是独立的元素，它的opacity只影响自己，不会影响兄弟节点的内容。父元素需要设置position: relative配合定位，同时给内容设置z-index保证叠加顺序正确。
需要注意一个细节：如果父元素的祖先链上存在overflow: hidden或者自身创建了新的层叠上下文，伪元素的z-index: -1可能被压到父元素背景之下导致背景"消失"，此时可以改为给内容包裹一层设置z-index: 1的元素来解决。
如果不想用伪元素，也可以直接插入一个空的<div>作为背景层，写法和伪元素完全一致，这种方式在需要给背景层加动画或者JS控制时更灵活。
方案三：绝对定位让内容脱离父容器
还有一种思路是反过来：让带opacity的容器只做背景，把内容用绝对定位放到它的兄弟位置上，从结构上彻底分离：
<div class="wrapper">
<div class="bg-layer"></div>
<div class="content">
<h3>标题完全不透明</h3>
<p>正文内容不会被透明度影响</p>
</div>
</div>
.wrapper {
position: relative;
}
.bg-layer {
position: absolute;
inset: 0; /* 等价于 top/right/bottom/left 全为0 */
background: #333;
opacity: 0.5;
}
.content {
position: relative; /* 只需比背景层级高即可 */
}
这种结构化写法的优点是语义清晰、可控性强，背景层甚至可以单独做模糊、滤镜等效果；缺点是HTML结构稍显冗余，适合背景效果比较复杂、需要独立控制的场景，比如全屏遮罩加弹窗内容。
兼容性与老项目降级处理
rgba在IE8及以下不被支持，如果项目还需要兼容这些古老浏览器，可以用IE私有的渐变滤镜做降级，它会作为不认识rgba时的回退背景：
.legacy-box {
background: #000; /* IE8回退：纯黑不透明 */
background: rgba(0, 0, 0, 0.5); /* 现代浏览器 */
/* IE8专用降级，最后的6位十六进制中前两位是透明度 */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#80000000, endColorstr=#80000000
);
}
startColorstr的格式是8位十六进制，前两位80换算成十进制正好是128，约等于50%不透明度。现在主流浏览器早已全面支持rgba和hsla，除非维护遗留系统，一般不需要再写这段滤镜代码。
总结与选择建议
简单背景半透明的需求，直接用rgba或hsla，一行代码解决，干净利落；背景是图片或需要复杂视觉效果时，用伪元素叠加方案；需要背景和内容彻底解耦、分别控制时，用绝对定位分离结构。三种方案覆盖了所有常见场景，共同的原则只有一个：透明度只设置在背景那一层上，永远不要设置在包含内容的父容器上。掌握这个核心思路后，再遇到类似的半透明设计稿，就能一次写对不用反复调试了。