优先用 CSS background-blend-mode 解决背景图与文字颜色冲突，如 multiply/screen/overlay；其次用伪元素遮罩层；再辅以 filter 微调；最终需前后端协同控制图片色域。
背景图片和文字颜色打架，优先用 CSS background-blend-mode
当 <div> 里设了 <code>background-image 又叠了 background-color，文字看不清，不是调低图片透明度（会糊），也不是硬改文字色（可能失真），直接用混合模式更可控。
常见可用值：multiply（加深底色，适合浅图+深字）、screen（提亮，适合深图+浅字）、overlay（兼顾对比与细节）。
- 只对同一元素的多层背景生效（比如
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...)） - 不兼容 IE，但现代 Chrome/Firefox/Safari 都支持
- 避免在
background-image: url(...)单独使用——它没第二层背景可“混合”
div.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(bg.jpg);
background-blend-mode: multiply;
color: white;
}文字区域加遮罩层比调整个体背景更灵活
用伪元素 ::before 盖一层半透色块，比直接给容器加 background-color 更安全：不影响图片本身，也不干扰子元素定位。
- 遮罩层
z-index必须低于文字（如z-index: 1），文字设position: relative; z-index: 2 - 用
rgba()而非opacity，避免子元素被连带变透明 - 图片宽高不确定时，遮罩层用
inset(0)或top: 0; left: 0; width: 100%; height: 100%确保铺满
.hero {
position: relative;
background-image: url(bg.jpg);
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.hero > * {
position: relative;
z-index: 2;
}
filter: brightness() 和 contrast() 是快速微调图片本身的利器
如果图片整体太亮压不住白字，或太暗吞没黑字，别急着换图——用 filter 在 CSS 里实时压暗/提亮局部区域。
立即学习“前端免费学习笔记（深入）”；
-
brightness(0.7)让图片变暗，适合浅色文字；brightness(1.3)提亮，适合深色文字 -
contrast(1.2)增强对比，能救回发灰的图；但超过1.5易出现噪点 - 慎用
filter在大图或滚动区域，部分旧版 Safari 渲染卡顿
.hero {
background-image: url(bg.jpg);
filter: brightness(0.8) contrast(1.1);
}真正难搞的是图片内容色域不可控，这时得靠设计前置干预
后端吐来的用户上传图、CMS 插入的 Banner 图，你没法预知主色调。硬套一套 CSS 混合规则大概率翻车。
可行解只有两个：
- 服务端加图处理：用 ImageMagick 或 Cloudinary 接口，在生成缩略图时自动加统一遮罩层或色偏滤镜
- 前端 JS 动态取色：用
canvas读取图片主色，再根据亮度（Y = 0.299*R + 0.587*G + 0.114*B）决定文字色是白还是黑——但注意 CORS 限制和性能开销
多数项目卡在这一步：以为 CSS 能兜底所有图，其实图片质量、来源、尺寸差异太大，必须接受“配色协调”本质是前后端协同问题，不是单靠几个 CSS 属性能闭环的。
