里设了 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 属性能闭环的。
关注官方公众号