应使用 background-color: rgba() 而非 opacity，因后者触发独立合成层导致文字发虚、热区缩小、动画卡顿；rgba() 仅作用于当前颜色属性，不干扰子元素渲染。
直接用 background-color: rgba()，别碰 opacity —— 后者会让文字发虚、点击区域变小、动画卡顿，是根源性错误。
为什么 opacity 一定不能用在文字容器上
浏览器会为设置了 opacity 的元素创建独立合成层，把整个 DOM 子树（含文字、图标、子 div）当做一个整体做透明混合。一旦进 GPU 合成层，文字就从亚像素抗锯齿退化为灰度抗锯齿，边缘立刻软、发虚、有重影——这不是字体或缩放问题，是渲染管线被强制改道。
-
opacity: 0.5会让<p>里的黑色文字变成“灰黑色”，可读性下降 - 哪怕你给子元素显式写
opacity: 1，也无效，因为继承链已被合成层锁定 - 连带副作用：按钮热区缩小、
transform动画掉帧、will-change: transform提前触发无谓图层
rgba() 的写法和常见翻车点
rgba() 只作用于当前颜色属性（比如 background-color），不影响子元素，是真正分离透明度作用域的方式。但写错参数或被覆盖，效果就失效。
- 第四个参数必须是
0–1的小数，rgba(0,0,0,0.4)表示 40% 不透明；写成50%或50会直接被忽略 - 不能靠
background: #000这类简写覆盖——它会清掉 alpha 值，background-color必须单独声明 - DevTools 中如果看到
background-color被划掉（strike-through），说明被前面的background复合属性重置了 - IE8 及更早不支持
rgba()，但会安全跳过该行，可用降级：background-color: #000; background-color: rgba(0,0,0,0.4);
图片背景上加半透明遮罩的实操方案
纯色背景用 rgba() 就够了；但图片背景无法直接对 url() 应用 alpha，得靠分层控制。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative，高度明确（比如height: 400px或aspect-ratio: 16/9） - 用
::before伪元素承载遮罩：content: ""+position: absolute+top: 0; left: 0; width: 100%; height: 100% - 伪元素设
z-index: -1（确保在图片下层）或z-index: 1（确保在图片上层但文字在更上层） - 遮罩层用
background-color: rgba(0,0,0,0.4)，别用opacity: 0.4，否则又触发合成层 - 文字层必须设
position: relative或absolute并配z-index: 2，否则可能被遮罩盖住
复杂点在于：同一段 CSS 在 Safari、Chrome、Firefox 甚至不同版本的 WebView 中，图层策略可能完全不同。没有通用解法，只有实测——尤其滚动中动态切换背景的导航栏，得逐个环境打开 DevTools → Layers 面板确认文字是否标红。
