opacity作用于整个渲染盒而非样式继承，其子元素不透明度为父级与自身相乘；需用rgba()替代opacity实现仅背景透明，伪元素可隔离复杂背景，排查发灰问题应自祖先链向上检查。
opacity 作用的是整个渲染盒，不是样式继承
这不是 bug，是浏览器渲染层的硬性规则：opacity 会把父元素及其所有子元素当作一个整体（painting box）做 Alpha 混合。哪怕子元素写了 opacity: 1，它也只是在父级已衰减的画布上重绘一次，最终不透明度 = 父级 × 子级（比如 0.4 × 1 = 0.4）。你在 DevTools 的 Computed 面板里看到子元素的 color 计算值变成 rgba(0, 0, 0, 0.4)，但源码明明是 #000，这就是最直接的证据。
想只让背景透，别用 opacity，改用 rgba()
把原来两行写法：
.card {
background-color: #000;
opacity: 0.6;
}
换成一行：
.card {
background-color: rgba(0, 0, 0, 0.6);
}
rgba() 只影响颜色本身，不传染给子元素，也不触发新层叠上下文。注意几点：
-
rgba()第四个参数是 0–1 的小数，rgba(0,0,0,50%)或rgba(0,0,0,50)都无效 - 边框、文字也支持：用
border-color: rgba(100, 100, 100, 0.3)或color: rgba(0, 0, 0, 0.8) - 渐变中要透明段，写
transparent，别用rgba(0,0,0,0)——旧版 Safari 可能误解析为黑色
遇到图片背景或 backdrop-filter，必须用 ::before 伪元素隔离
当背景是 background-image + backdrop-filter: blur(4px) 时，直接在容器上写 background-color: rgba() 会失效或行为不一致。这时得靠伪元素分层：
- 父容器加
position: relative -
.container::before设position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: -1; - 确保真实内容的
z-index> 0，且自身不设opacity或filter: opacity() - 伪元素默认不占文档流，宽高必须显式设置，否则覆盖不到
子元素发灰，大概率不是你写的那层问题
你没给当前元素设 opacity，但文字还是发灰？问题往往藏在祖先链上：
- 检查
.modal-overlay、.page-wrapper或某个隐藏的div是否悄悄加了opacity: 0.7 - 留意
backdrop-filter: blur(4px)配合半透背景，这种影响也是穿透式的 - 查的时候得往上逐层 inspect computed styles，重点盯
opacity和filter的生效位置——比盲目改rgba()更省时间
opacity，下面所有东西都得跟着淡。所以排查永远要从祖先开始，而不是在子元素上反复加 opacity: 1。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
