最优解是用 rgba() 在文字下方叠加半透底色：深色背景配 rgba(0,0,0,0.6)，浅色背景配 rgba(255,255,255,0.7)，需设 display: inline-block 且用 padding 控制边距；box-shadow 仅作备选，适用于 SSR 场景。
背景图上文字看不清，直接调文字颜色不解决问题
纯色文字在复杂背景图上常出现对比度不足、边缘发虚、阅读吃力等问题。单纯改 color 值（比如从黑色改成白色）只是碰运气——图里有暗区亮区，一种颜色无法适配全局。
用 rgba() 在文字下方加一层半透底色最稳妥
这不是给整个容器加背景，而是专为文字服务的「视觉锚点」：在 ::before 或包裹 <span></span> 上叠加一层带透明度的色块，让文字始终落在可控灰阶上。
- 推荐用
rgba(0, 0, 0, 0.6)（深色底+浅字）或rgba(255, 255, 255, 0.7)（浅色底+深字），透明度 0.5–0.8 之间通常平衡可读性与图面保留度 - 必须设
display: inline-block或display: inline-flex，否则::before无法撑开宽度高度 - 用
padding而非margin控制文字与底色边距，避免底色塌陷或错位
避免用 background-blend-mode 混合文字和背景图
有人试过给文字加 background-image 再叠 background-blend-mode: multiply，实际效果极不可控：字体粗细、字号、抗锯齿方式都会影响混合结果，且 Safari 对内联元素的 blend 支持不稳定。
-
background-blend-mode适合整块容器，不适合文本级微调 - 文字本身不是「背景」，强行当背景处理会触发渲染异常，比如 Chrome 中偶发文字闪烁或透明度丢失
- 移动端 WebView 兼容更差，iOS 15 以下基本不生效
真要兼顾语义和性能，优先用 box-shadow 模拟底色
如果连额外 DOM 节点或伪元素都不想加（比如 SSR 场景下需最小化 HTML 变动），可用多层 box-shadow 给文字“描底”：
立即学习“前端免费学习笔记（深入）”；
.text-with-bg {
color: white;
text-shadow:
0 0 8px rgba(0,0,0,0.6),
0 0 12px rgba(0,0,0,0.6);
}
注意：这本质是模糊投影，不是实心底色，所以只适用于中等字号（≥16px）和非高精度排版场景；小字号下容易糊成一团，且无法精确控制底色尺寸。
真正难的不是选哪种方案，而是得先判断背景图的明暗分布——用浏览器开发者工具吸管取几个关键区域的亮度值，再决定用黑底白字还是白底黑字。不然所有 rgba 值都是盲调。
