用 opacity 切换背景会让文字发虚，因为 opacity 使元素及子节点进入同一合成层进行透明混合，触发 gpu 合成后文字从亚像素抗锯齿退化为灰度抗锯齿，导致边缘变软、发虚、有重影。
为什么用 opacity 切换背景会让文字发虚
因为 opacity 作用于整个元素及其所有子节点，浏览器会把文字连同背景一起压进同一个合成层做透明混合——一旦触发 GPU 合成（DevTools 的 Layers 面板里文字区域标红），文字就从亚像素抗锯齿退化为灰度抗锯齿，边缘立刻变软、发虚、有重影。这不是字体问题，是渲染管线被强制改道了。
rgba() 背景 + 文字不模糊的实操要点
用 background-color: rgba(0, 0, 0, 0.5) 替代 opacity: 0.5 是基础，但光这样还不够：
- 确保文字颜色明确设置（比如
color: white），不能依赖继承或默认值 - 避免在该容器或任意父级上加
transform、filter、will-change: transform——哪怕只是translateZ(0)，都会把它拎进独立图层 - 如果用了
backface-visibility: hidden，删掉；它和opacity: 0.99一样，都是“伪透明”，照样触发图层分离 - 检查动画中是否出现小数像素位移（如
translateX(50%)在 199px 宽容器里算出 99.5px），改用calc(50% - 0.5px)或固定整数偏移
切换类名时文字重影的真正原因和应对
类名切换本身不导致重影，但浏览器在重绘过渡帧时，可能把旧背景残留像素和新背景叠加渲染，尤其在 macOS Safari 或 Chrome ≤112 中更明显：
- 不要依赖
will-change: background——它对背景切换几乎没用，反而可能提前创建无谓图层 - 若必须切换类名，用
transition: background-color 0.3s ease，而不是靠 JS 瞬间替换 class - 极端情况可加
transform: translateZ(0)到父容器（不是文字本身），强制其成为合成根，让文字始终附着在该层上 - 移动端 WebView 行为差异大，务必在真机上验证 Layers 面板是否标红
哪些 -webkit-font-smoothing 写法实际无效
别再无脑加 -webkit-font-smoothing: antialiased：
- 它只在未提升为合成层的静态文字上生效，一旦文字进了红色图层，这个属性彻底失效
- 在 Windows Chrome 里早已被忽略，macOS 上仅对 Chrome ≤112 有效
-
antialiased会让小字号文字变细发灰，反而降低可读性 - 真正有效的做法是：打开 DevTools → Layers 标签 → 悬停文字看是否标红。标红了，就该砍 CSS，而不是调字体平滑
复杂点在于：同一段 CSS 在 Safari、Chrome、Firefox 甚至不同版本的 WebView 中，图层策略可能完全不同。没有通用解法，只有实测 —— 尤其是滚动中动态切换背景的导航栏，得逐个环境跑 Layers 面板确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
