opacity会使文字变模糊，因其将整个元素及子节点合成为半透明图层，干扰文字亚像素渲染；应改用rgba()设置背景透明度，仅影响背景而不降低文字不透明度。
文字模糊是因为 opacity 会让整个元素（包括文字）一起变透明，导致浏览器对文字做抗锯齿重绘，视觉上发虚。用 rgba() 设置背景色的透明度，只影响背景，文字保持 100% 不透明，清晰度就保住了。
为什么 opacity 会让文字变模糊
opacity 是作用于整个元素及其所有子节点的渲染层属性。一旦设为小于 1 的值，浏览器会把该元素及其内容（含文字）合成为一层半透明图层，再进行缩放或混合，文字边缘的亚像素渲染被干扰，尤其在非整数缩放（如 125%、150%）或 Retina 屏上更明显。
正确做法：用 rgba 替代透明背景色
只让背景“透”，文字“不透”。例如：
- ❌ 错误（文字模糊）：
.box { background: #000; opacity: 0.7; } - ✅ 正确（文字清晰）：
.box { background: rgba(0, 0, 0, 0.7); }
注意：rgba(0,0,0,0.7) 中的 0.7 是 alpha 通道值，不是 opacity，它仅作用于背景色本身，不影响子元素。
立即学习“前端免费学习笔记（深入）”；
兼容性与替代方案
rgba 在 IE9+ 和所有现代浏览器中完全支持。如果必须兼容 IE8 及以下：
- 可用
background: rgb(0,0,0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000);（IE 滤镜模拟 rgba 背景） - 更推荐降级为纯色背景 + 伪元素遮罩：用
::before绝对定位一层半透明黑块，父容器背景留空，文字自然不受影响
其他容易忽略的细节
即使用了 rgba，以下情况仍可能导致文字发虚：
- 父容器设置了
transform: scale()或will-change，触发了硬件加速图层，可能影响字体渲染 —— 尝试加-webkit-font-smoothing: antialiased;或text-rendering: optimizeLegibility; - 背景图叠加时，别给文字容器本身设 opacity，应把图片和蒙层分开处理（例如用伪元素盖一层 rgba 背景）
- 避免在文字上直接使用
backdrop-filter（毛玻璃），它也会导致文字模糊，需配合isolation: isolate或分层隔离
