最可靠做法是用 rgba() 半透明 background-color 遮罩文字容器，而非 opacity 或八位 hex；伪元素遮罩需 content: ""、明确父高及 z-index；mix-blend-mode 仅限纯色文字且兼容性差。
图片上文字看不清？先加 background-color 遮罩再调透明度
纯靠 color 和 text-shadow 很难稳定让文字在任意图片上都清晰，尤其当图片有明暗渐变或纹理时。最可靠的做法是给文字容器加一层浅色半透明背景——不是给文字本身加 opacity，而是用 background-color: rgba(0, 0, 0, 0.5) 这类值盖住下方局部图片。
常见错误是直接给 <span> 或 <p> 设 opacity: 0.7，结果整段文字+边距都变透明，反而更糊；或者用 background: #0008（八位十六进制）但忘了旧版 Safari 不支持，导致遮罩完全失效。
- 推荐用
rgba()而非八位 hex，兼容性更好（IE9+、所有现代浏览器都行） - 遮罩宽度要略大于文字内容，建议用
inline-block包裹文字并设padding，避免背景紧贴字边缘发虚 - 如果图片是响应式（
max-width: 100%），遮罩容器也要同步设置display: inline-block，否则会撑满父容器宽度
用 ::before 伪元素做遮罩更灵活
当文字需要居中覆盖整张图（比如 banner 标题），把遮罩和文字写成两个同级元素容易破坏语义结构。这时用 position: relative 给图片容器定位，再用 ::before 伪元素画遮罩层，文字层叠其上，逻辑更干净。
典型翻车点：忘记给伪元素设 content: ""（没这句就啥都不渲染）、没设 z-index 导致遮罩压不住文字、或用 top: 0; left: 0; width: 100%; height: 100% 但父容器没设高度，遮罩直接塌缩为 0。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须带
content: ""才能生成 - 父容器需有明确高度（比如
height: 400px或aspect-ratio: 16/9），否则100%无参照 - 遮罩层
z-index设为1，文字层设为2，确保层级关系明确 - 示例关键片段：
.hero { position: relative; height: 400px; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; } .hero-text { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
深色图配浅字、浅色图配深字？别硬切，用 mix-blend-mode 动态适配
如果图片内容差异大（比如轮播图里一张雪山一张夜景），固定黑白文字+固定遮罩色依然会局部可读性差。此时可以放弃预设遮罩，改用 mix-blend-mode: difference 或 exclusion 让文字自动“反色”显示。
注意这不是万能解法：mix-blend-mode 在部分安卓 WebView 和旧版 iOS Safari 中不支持；且只对纯色文字有效，加了 text-shadow 后效果会混乱；更隐蔽的坑是它会让文字边缘出现意外晕染，尤其在 PNG 透明边缘上。
- 仅适用于文字颜色为纯黑（
#000）或纯白（#fff）的场景 - 必须确保文字父容器没有
isolation: isolate或transform，否则混合模式失效 - 测试时重点看 Android 10 以下和 iOS 13 以下机型，这些系统对
difference支持不稳定 - 慎用
screen和multiply，它们对亮度敏感，容易让浅图上的白字直接消失
rgba 的 alpha 值，却忽略 padding 不够导致背景被裁、或伪元素没 content 导致遮罩根本没画出来——这些才是实际项目里卡半天的真正原因。 
