为什么CSS设置opacity后整个模块都变透明了

opacity作用于整个渲染层而非单个属性，会将父元素及所有后代打包为一个图层统一进行Alpha混合，导致子元素即使设opacity:1也无法恢复不透明，正确实现背景透明应使用rgba()或伪元素隔离。

opacity 作用的是整个渲染层，不是单个属性

因为 opacity 不是“让背景变淡”或“让颜色变浅”的样式控制，而是对当前元素及其所有后代构成的整个绘制单元（painting box）做一次统一的 Alpha 混合。浏览器会把父元素 + 所有子节点（文字、图片、按钮、伪元素）打包成一个图层，再整体压暗。所以你看到的“模块变透明”，其实是设计行为，不是 bug。

子元素写 opacity: 1 也拉不回来

这是最容易踩坑的地方：哪怕你在内部 <button> 上显式写了 opacity: 1，它依然显示为半透。原因在于透明度是乘性叠加——父级 opacity: 0.4 × 子级 opacity: 1 = 最终 0.4。浏览器不会“撤销”父层的混合操作。

1. Inspector 里看到的文字 color 计算值可能是 rgba(0, 0, 0, 0.4)，而不是你写的 #000
2. 边框、阴影、图标边缘都会同步发虚，不是渲染异常，是正常结果
3. 这种影响会穿透多层嵌套，可能源头在某个你没注意到的祖先容器上（比如全局 .overlay）

真正想只调背景透明，该用 rgba() 或伪元素

如果你的目标是“背景图/色变淡，但文字和按钮保持清晰”，opacity 就是错路。正确做法只有两个：

1. 纯色背景 → 改用 background-color: rgba(255, 255, 255, 0.8)，alpha 值只作用于颜色本身，不传染
2. 带 background-image 的复杂背景 → 用 ::before 伪元素隔离：position: absolute + background: rgba(0,0,0,0.4) + z-index: 1，再确保内容层 z-index: 2 且不设 opacity
3. 别混用：background: url(...), rgba(0,0,0,0.3) 会把 rgba 当作第二层背景叠上去，容易发灰

查问题时别只盯当前元素

很多情况下你没动 opacity，但内容还是发灰。这时候得往上翻 DOM 树，逐层检查 computed styles，重点看：

1. 有没有祖先元素写了 opacity（尤其模态框遮罩、布局 wrapper、全局主题类）
2. 有没有 backdrop-filter: blur() 配合半透背景，它也会造成类似视觉衰减
3. filter: opacity() 和 opacity 行为一致，同样不可逆，别漏看

真正难的不是写对代码，而是意识到“谁在透”——很多时候透明的不是你正在调试的元素，而是它头顶三层的某个隐藏容器。