正确做法是用 background-color: rgba() 单独设置背景透明度，文字保持不透明；需避免 opacity/filter、确保伪元素 content/inset/定位、适配深色模式及系统可访问性设置。
用 background-color: rgba() 替代 opacity
直接给文字容器设 opacity 是最常见错误：它会让整个元素（含文字、图标、内联 SVG）一起变灰、发虚，尤其在高分屏或系统缩放下明显。浏览器会把文字和背景压进同一合成层，触发灰度抗锯齿，边缘立刻软化。
正确做法是只改背景的透明度，文字保持 100% 不透明。用 background-color: rgba(0, 0, 0, 0.5) 这类写法——第四个参数必须是 0–1 的小数，不能写 50% 或 50；且必须单独声明 background-color，不能靠 background: #000 这类简写覆盖，否则 alpha 值会被清掉。
- DevTools 中若看到
background-color被划掉（strike-through），说明前面有background复合属性重置了它 -
rgba()兼容 IE9+ 和所有现代浏览器；八位十六进制如#0008在旧版 Safari 中不支持，别用 - alpha 值建议控制在 0.55–0.85 之间：低于 0.55 压不住底图，高于 0.85 显得沉闷失层次
伪元素遮罩时必须设 content: "" 和 inset: 0
当背景是图片（url()）时，rgba() 对它无效，得用伪元素单独画一层遮罩。但漏掉关键声明就会翻车：没 content: ""，伪元素根本不渲染；没 inset: 0（或等价的 top: 0; left: 0; width: 100%; height: 100%），遮罩尺寸为 0，直接塌缩。
同时，父容器必须设 position: relative 提供定位上下文，伪元素设 position: absolute + z-index: 1，文字层显式设 z-index: 2 或至少 position: relative 确保层级高于遮罩。
- 如果父容器高度由内容撑开（比如没设
height），伪元素的100%高度会失效，必须补上明确高度或min-height - 父容器有
border-radius？伪元素也得同步加，否则圆角处漏出原图 - 避免用
filter: opacity()替代opacity，它同样触发 GPU 合成，文字照样发虚
避开触发文字模糊的渲染陷阱
即使用了 rgba()，文字仍可能发虚，根源常在意外的图层分离。只要父级或自身加了 transform、filter、will-change: transform，哪怕只是 translateZ(0)，浏览器就会把它拎进独立合成层，文字抗锯齿降级。
动画中也要小心：小数像素位移（如 translateX(50%) 在 199px 宽容器里算出 99.5px）会导致重影。切换类名时文字残留，往往不是 JS 问题，而是浏览器过渡帧叠加所致。
- 删掉所有不必要的
backface-visibility: hidden和will-change声明 - 文字颜色必须显式设置（如
color: white），不能依赖继承或默认值 - 测试时关掉系统「增加对比度」开关（macOS/Windows 都有），它会强制抬高 rgba 表现，本地看着好，用户端可能糊成一片
深色模式下遮罩色要反向配色
浅色模式用 rgba(0, 0, 0, 0.55)，深色模式不能简单改成 rgba(0, 0, 0, 0.4)——暗背景下黑色遮罩视觉权重太低，反而让文字“浮”在上面，缺乏锚定感。得反着来：深色模式用浅色遮罩，比如 rgba(255, 255, 255, 0.4)，alpha 值再下调 0.05–0.1。
如果项目已用 CSS 变量管理主题，把遮罩色定义为 --overlay-bg，并在 @media (prefers-color-scheme: dark) 里覆盖，比重复写 rgba 更易维护。
- 别依赖
color-scheme: light dark自动适配，它只影响表单控件，不控制遮罩 - 深色模式下文字颜色也要同步检查：
text-black在浅色背景上没问题，但在白色遮罩上就得换成text-gray-800或dark:text-white - 最麻烦的从来不是那行
rgba()，而是得同时盯住三件事：底图明暗分布、文字字号与行高带来的视觉密度、以及系统级可访问性设置对 alpha 的干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
