父元素设 opacity 会强制子元素一同变透明，因opacity作用于整个painting box而非样式继承；应改用rgba()控制局部透明度，避免祖先链中隐式opacity影响。
父元素设 opacity 必然拖累子元素，这不是 bug，是浏览器渲染层的硬性规则——别试图用子元素写 opacity: 1 拉回来，它根本无效。
为什么子元素写了 opacity: 1 还是发灰
因为 opacity 不是“样式继承”，而是对整个 painting box 做 Alpha 混合：父层像素 × 子层像素。子元素的 opacity: 1 只是在父层已衰减（比如只剩 60% 不透明）的画布上重绘一次，最终输出仍是 0.6 × 1 = 0.6。你在 DevTools 里看到子元素的 color 计算值变成 rgba(0, 0, 0, 0.6)，但源码明明是 #000，这就是证据。
用 rgba() 替换 background-color 最直接
把原来两行写法：
background-color: #000;<br>opacity: 0.6;
换成一行：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
background-color: rgba(0, 0, 0, 0.6);
这样只有背景透，文字、边框、按钮、图标全保持 100% 清晰。注意几点：
- 别写
rgba(0, 0, 0, 0.6) !important—— alpha 值本身已具声明力，!important是冗余且干扰变量管理的 - 渐变中要透明段，用
transparent，别用rgba(0, 0, 0, 0)，后者在旧版 Safari 可能被误解析为黑色 - 需要文字或边框局部半透？直接写
color: rgba(0, 0, 0, 0.8)或border-color: rgba(100, 100, 100, 0.3)
遇到图片背景或 backdrop-filter 就得用伪元素
当背景是 background-image + backdrop-filter: blur(4px) + 半透叠加时，rgba() 直接写在 background 上会失效或行为不一致。这时必须用 ::before 隔离：
- 父容器加
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
你没给当前父元素写 opacity，但子元素还是发灰？大概率是 .modal-overlay、.page-wrapper 或某个隐藏的祖先 div 悄悄加了 opacity: 0.7，或者用了 backdrop-filter 配合半透背景。这种影响是穿透式的，查起来得一层层往上 inspect computed styles，重点盯 opacity 和 filter 的生效位置——比盲目改 rgba() 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
