子元素无法通过opacity: 1恢复不透明，因opacity作用于整个渲染层，父子透明度相乘（如0.4×1=0.4）；应改用rgba()控制背景色，或用伪元素/兄弟元素隔离背景与内容层。
为什么子元素无法通过 opacity: 1 恢复不透明
这不是 bug，而是 CSS 渲染层的固有行为：opacity 作用于整个元素及其后代构成的合成层（compositing layer），子元素的 opacity 值会与父元素相乘。比如父级 opacity: 0.4，子元素即使写 opacity: 1，最终渲染值仍是 0.4 × 1 = 0.4。你改不了这个乘法逻辑，也覆盖不了——!important 无效，z-index 无效，position: relative 包裹也无效。
用 rgba() 替代 background-color 是最简方案
适用于纯色背景，且只需让“背景”变透明、文字/子元素保持清晰的场景：
-
background-color: #000→ 改成background-color: rgba(0, 0, 0, 0.4) - 保留原有文字颜色、边框、子元素所有样式不变
- 不触发新层叠上下文，不影响
z-index流程 - 兼容性极好：Chrome 1+、Firefox 3+、Safari 3.1+、Edge 全版本、IE9+
注意：rgba() 只能用于颜色类属性（background-color、border-color 等），对 background-image 无效——别试图写 background-image: rgba(url(...), 0.5)，语法错误。
处理带图片或渐变背景时，必须用伪元素或兄弟元素隔离
当背景是 background-image、linear-gradient 或需要模糊等效果时，rgba() 失效，只能靠结构隔离：
立即学习“前端免费学习笔记（深入）”；
- 推荐用
::before伪元素：在容器内创建一个同尺寸背景层，设opacity，再给内容层设position: relative和更高z-index - 或者将背景和内容拆为兄弟元素，共用同一个
position: relative父容器，各自position: absolute定位重叠 - 关键点：两者不能是父子关系；否则继承照旧
- 若需兼容老项目，记得加
isolation: isolate防止意外混合（尤其在深色模式叠加时）
示例核心结构：
.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #37a7d7, #000);
opacity: 0.5;
z-index: 1;
}
.card-content {
position: relative;
z-index: 2;
}
容易被忽略的层叠上下文陷阱
哪怕你用了伪元素方案，如果父容器本身已因 opacity < 1、transform、filter 等属性创建了层叠上下文，而你又没显式隔离内容层，某些浏览器（尤其是 Safari 和旧版 Chrome）仍可能让文字轻微发灰。
- 在内容层上加
isolation: isolate是低成本保险策略 - 避免对内容层本身设任何
rgba()背景或opacity，哪怕值是0.999—— 多次叠加会导致不可控变暗 - 检查 DevTools 的 Layers 面板，确认背景层和内容层是否真的分属不同合成层
真正难的不是写出能跑的代码，而是判断该用哪一层抽象：颜色值、伪元素，还是 DOM 结构调整——选错一层，后面所有样式调试都在对抗 CSS 本身的渲染规则。
