半透明色块（如rgba）比纯黑/白背景或opacity更可靠，因其仅压背景而不削弱文字清晰度；需控制alpha在0.55–0.85间、预留足够padding、深色模式反向配色，并避免mask-image等不可控方案。
半透明色块为什么比纯黑/白文字背景更可靠
直接用 rgba(0,0,0,0.7) 盖在图片或渐变上，比调低文字 opacity 或硬套 background-color: #000 更稳——前者只压背景，后者会连文字一起变灰、发虚，尤其在 Retina 屏或缩放 125% 时明显。遮罩本质是「隔离对比度」，不是「削弱文字」。
常见错误：用 opacity: 0.8 包裹整个文字容器，结果图标、内联 SVG 也跟着变淡；或者写 background: rgba(0,0,0,0.5) 却忘了加 padding，文字紧贴边缘，视觉上还是看不清。
- 必须给文字容器留出至少
padding: 12px 16px，否则半透明色块没发挥余地 -
rgba()的 alpha 值别低于 0.55（太透压不住底图），也别高于 0.85（太闷失层次） - 深色文字配浅色遮罩（如
rgba(255,255,255,0.6)）时，要同步检查文字颜色是否足够深，#333比#000在高亮背景下反而更稳
CSS mask-image 和 background-blend-mode 不是替代方案
看到「遮罩」就下意识查 mask-image 或 background-blend-mode: multiply？先停一下。这两个是图像合成工具，不是可读性补救措施。它们依赖底图内容、受浏览器渲染差异影响大，Chrome 和 Safari 对 mask-image 的抗锯齿处理完全不同，同一段代码在 iPhone 上可能文字边缘发虚，在 Mac 上却正常。
真正可控的只有层叠顺序 + 半透明色块：position: relative 文字层 + position: absolute 色块层 + z-index 锁死关系。其他路径容易在换图、换主题、甚至系统深色模式切换时崩。
立即学习“前端免费学习笔记（深入）”；
-
mask-image无法响应文字尺寸变化，文字缩放后遮罩区域错位 -
background-blend-mode要求背景必须是纯色或线性渐变，遇到图片或复杂 CSS 渐变直接失效 - 所有基于滤镜（
filter: brightness()等）的方案都会触发新层叠上下文，可能意外截断drop-shadow或弹出层
深色模式下 rgba 遮罩的兼容写法
用 @media (prefers-color-scheme: dark) 切换遮罩颜色？别只改 alpha 值。深色背景下，rgba(0,0,0,0.6) 和 rgba(255,255,255,0.6) 视觉权重差很多——前者沉，后者浮。实际要反着配：深色模式用浅色遮罩（rgba(255,255,255,0.4)），浅色模式用深色遮罩（rgba(0,0,0,0.55)），alpha 值还得下调 0.05–0.1，否则暗环境下过重。
- 别依赖
color-scheme: light dark自动适配，它不控制遮罩，只影响表单控件 - 如果项目已用 CSS 变量管理主题，把遮罩色定义为
--overlay-bg: rgba(0,0,0,0.55)，并在媒体查询里覆盖，比重复写 rgba 更易维护 - 测试时务必关掉系统「增加对比度」开关，macOS 和 Windows 都有这选项，它会强制提升所有 rgba 的 alpha 表现，本地看着好，用户端可能糊成一片
最麻烦的不是写对那行 rgba()，而是得同时盯住三件事：底图明暗分布、文字字号与行高带来的视觉密度、以及用户设备是否开了辅助功能。少盯一个，遮罩就从保障变成干扰。
