用background-color: rgba()替代opacity是避免意外创建复合层最简单有效的方法，因opacity
直接用 background-color: rgba() 替代 opacity，是避免意外创建复合层（compositing layer）最简单也最有效的办法。 因为 opacity 小于 1 时，浏览器会强制触发新层叠上下文和合成层，导致 z-index 行为异常、滚动卡顿、filter 失效等连锁问题；而 rgba() 只改颜色本身，不干预渲染流程。
为什么 opacity 会强制创建复合层
这是浏览器渲染引擎的底层策略：只要元素的 opacity 不是 1，Chrome、Safari 和 Firefox 就会把它提升为独立的合成层，以便做 GPU 加速混合。这本意是优化动画性能，但副作用明显：
- 触发新的层叠上下文，
z-index相对关系失效（比如弹窗被父容器“压住”） - 如果该元素含
transform或will-change，可能叠加出多个冗余合成层，拖慢渲染 - 某些场景下（如嵌套
position: fixed），滚动时出现闪烁或错位
用 rgba() 替代时的关键写法细节
rgba() 本身不触发合成层，但它必须“干净地”替换掉所有可能引起层叠变更的声明：
- 删掉旧的
background-color: #fff或background: #000—— 层叠规则会让它覆盖rgba() - 别混用
background简写和background-color：例如background: url(bg.jpg); background-color: rgba(0,0,0,0.3)会失败，应写成background: rgba(0,0,0,0.3) url(bg.jpg) center/cover - 边框、文字色也可用
rgba()单独控制，比如border-color: rgba(0,0,0,0.1)，不影响背景或文字 - alpha 值必须是小数（
.7或0.7），rgba(0,0,0,70%)是无效语法，整条声明会被丢弃
遇到渐变或图片背景怎么办
纯色背景可以直接上 rgba()，但 linear-gradient 或 url() 本身不支持 alpha 参数，这时不能硬套：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));—— gradient 的 color-stop 支持rgba()，但整个背景仍是单层，无法实现“图层遮罩”效果 - 正确思路：用伪元素模拟遮罩层，
::before绝对定位 +background-color: rgba(0,0,0,0.3)+z-index: -1，这样既不污染主元素的层叠上下文，又能精准控透 - 注意伪元素必须设
content: ""和显式尺寸（top/left/right/bottom: 0或width/height: 100%），否则不渲染
真正容易被忽略的是：即使你没写 opacity，只要用了 backdrop-filter、transform: translateZ(0) 或某些 PostCSS 插件自动注入的 will-change: transform，同样会悄悄创建复合层。检查是否“多此一举”，比修复更省力。
