设置 opacity 会让子元素一起变透明，因为 opacity 作用于整个元素及其后代渲染层，透明度按乘积计算；想背景透明而文字不透明，应使用 rgba()、hsla() 或 8 位十六进制颜色值。
为什么设置 opacity 会让子元素一起变透明？
因为 opacity 不是颜色属性，而是作用于整个元素及其所有后代的渲染层。只要父元素设置了 opacity: 0.5，浏览器就会把该元素（含子元素）当作一个整体进行半透明混合，子元素无法通过设置 opacity: 1 挽回——这个值是相对于父容器的，最终合成透明度是乘积关系（比如父 0.5 × 子 1 = 0.5）。
想让背景透明但文字不透明，该用什么替代 opacity？
优先用支持 alpha 通道的颜色值：
-
background-color: rgba(0, 0, 0, 0.3)—— 仅背景透明，文字、边框、子元素完全不受影响 -
background-color: hsla(200, 100%, 50%, 0.3)—— 同理，更利于色相调整 -
background-color: #0000004D—— CSS Color Module Level 4 的 8 位十六进制写法（前 6 位是 RGB，后 2 位是 alpha），Chrome 65+、Firefox 95+、Safari 15+ 支持
border-color、color 等也支持 rgba() 或 hsla()，别只改背景。
opacity 和 rgba() 在层叠上下文上有啥区别？
关键差异在于是否触发新的层叠上下文：
- 设置
opacity小于 1 会强制创建新层叠上下文，可能意外改变 z-index 层级顺序，尤其在动画或弹窗叠加时容易错位 -
rgba()或hsla()不触发新层叠上下文，层级行为完全由原本的position、z-index控制，更可预测 - 若需过渡/动画透明效果，
opacity仍可接受；但纯视觉分层需求（如模态框遮罩 + 清晰文字），必须用rgba()配合background-color
遇到旧项目只能用 opacity 怎么局部“取消”透明？
严格来说不能真正“取消”，但可通过结构隔离绕过继承：
- 把需要保持不透明的内容移出透明父容器，用绝对定位 + 同级 sibling 方式覆盖（需确保父容器
position: relative） - 避免用
opacity控制整块 UI 的透明，拆分为独立的透明背景层 + 不透明内容层 - 慎用
transform: translateZ(0)或will-change: opacity强制硬件加速——这会加剧层叠上下文问题，不是解法
.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.card-content {
position: relative;
z-index: 2; /* 文字在透明蒙层之上，且自身无 opacity */
}父元素的 opacity 影响子元素不是 bug，是规范定义的行为；真正容易被忽略的是：它同时绑架了层叠顺序和性能渲染路径，而多数人只盯着“文字变淡”这一个表象。
