opacity作用于整个渲染盒，子元素无法通过自身opacity:1恢复，实际不透明度为父级×子级；应改用rgba()控制背景或边框透明度，或用伪元素隔离背景。
直接用 opacity 设置父容器透明度，子元素必然发虚、变淡，无法靠自身 opacity: 1 拉回来——这是渲染层叠加机制决定的，不是 bug，也改不了。
为什么 opacity 会让子元素“逃不掉”
它作用于整个渲染盒（painting box），包括背景、边框、文字、所有后代节点。子元素的 opacity: 1 只是在已压暗的画布上再画一次，最终视觉仍是父级透明度 × 子级透明度。比如 opacity: 0.5 的父元素里放一个 opacity: 1 的按钮，按钮实际不透明度还是 0.5。
常见错误现象：
- 文字颜色看起来灰蒙蒙、对比度下降
- 按钮点击反馈变弱，图标边缘发虚
- 调试时发现子元素明明写了
color: #000，但 Inspector 显示计算值却是rgba(0, 0, 0, 0.5)
用 rgba() 替换背景色是最稳方案
只让背景透，内容照常清晰，语义明确、兼容性好（IE9+ 全支持），且可直接控制 alpha 值做变量管理。
实操建议：
- 把
background-color: #000; opacity: 0.6;改成background-color: rgba(0, 0, 0, 0.6); - 渐变背景中需要透明段时，用
transparent而非rgba(0,0,0,0)，避免旧浏览器误解析为黑色 - 边框或文字也要局部透明？同样用
border-color: rgba(100, 100, 100, 0.3)或color: rgba(0, 0, 0, 0.8) - 别写
rgba(0,0,0,0.6) !important——alpha 值本身已足够，!important是冗余且易埋坑
复杂背景时用伪元素隔离更可靠
当背景是图片 + 模糊 + 半透叠加，或需动态切换透明度又不想动结构时，::before 伪元素是更干净的解法。
关键步骤：
- 父容器设
position: relative - 伪元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 伪元素上写
background: rgba(0, 0, 0, 0.4);，主内容层完全独立 - 确保伪元素
z-index低于子元素但高于背景图（如有）
别忽略那些“没写 opacity 却发灰”的情况
真正难排查的是祖先链上某一层悄悄加了 opacity，或者用了 backdrop-filter 配合半透背景——这种影响是穿透式的，Inspector 里不一定一眼看出。遇到子元素莫名变淡，先往上逐层检查 computed styles 中的 opacity 和 filter 值，比盲目调 rgba 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
