opacity作用于整个渲染盒子而非继承，使父元素及后代作为整体图层进行Alpha混合；子元素设opacity:1无效，因底层绘制不可逆；应改用rgba()控制背景透明，避免影响子元素清晰度。
opacity 作用于整个渲染盒子，不是继承
它不是把透明度“传给”子元素，而是让浏览器把父元素及其所有后代当成一个整体图层，在合成阶段统一做 Alpha 混合。子元素写 opacity: 1 只是在这个已衰减的图层上再画一次，最终像素值仍是 0.4 × 1 = 0.4。你在 DevTools 的 Computed 面板里看到子元素的 color 计算值变成 rgba(0, 0, 0, 0.4)，但源码是 #000，这就是证据。
子元素设 opacity: 1 为什么无效
因为这不是样式覆盖问题，而是底层绘制行为不可逆。常见错误现象包括：
- 父容器
opacity: 0.6，里面按钮加了opacity: 1，按钮文字依然发灰 - 模态框遮罩层用了
opacity，导致内部表单控件也变淡、点击区域响应变弱 - 用
opacity做淡入动画时，文字边缘出现 subpixel 模糊或闪烁
这些都不是 bug，是规范强制行为——opacity 触发新层叠上下文，且只接受乘法叠加。
真正该用 rgba() 控制背景透明
把原来两行写法：
background-color: #000; opacity: 0.6;
换成一行：
background-color: rgba(0, 0, 0, 0.6);
这样只有背景透，文字、边框、图标、子元素全保持 100% 清晰。注意：
-
rgba()中 alpha 必须是 0–1 小数，rgba(0,0,0,60%)或rgba(0,0,0,60)都会被浏览器忽略 - 渐变中要用
transparent而非rgba(0,0,0,0)，后者在旧版 Safari 可能被误解析为黑色 - 需要文字局部半透？直接写
color: rgba(0, 0, 0, 0.8)，别碰父级opacity
祖先链上的 opacity 最容易被忽略
你没给当前父元素写 opacity，但子元素还是发灰？大概率是某个隐藏祖先（比如 .modal-overlay、.page-wrapper 或 body 下某层 div）悄悄加了 opacity: 0.7，或者用了 backdrop-filter 配合半透背景。这种影响是穿透式的，查起来得一层层往上 inspect computed styles，重点盯 opacity 和 filter 的生效位置——比盲目改 rgba() 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
