背景混合模式属性
最后更新：2026-09-13
background-blend-mode 背景混合模式属性
background-blend-mode 属性用于设置元素的背景图像之间、以及背景图像与背景颜色之间的混合模式。它支持多种混合模式如 multiply、screen、overlay 等，类似 Photoshop 的图层混合。该属性为 CSS3 新增，适合创建丰富的视觉效果。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | 关键字 | 背景混合模式 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-blend-mode | ✓ v30 | ✓ v12 | ✓ v30 | ✓ v9 | ✓ v16 |
| 所有主流浏览器均支持 | |||||
提示： 多个背景图之间用逗号分隔设置多个混合模式，如 background-blend-mode: multiply, screen。
注意： background-blend-mode 不影响元素与页面其他内容的混合，元素间混合请使用 mix-blend-mode。
❓ 常见问题
Qbackground-blend-mode 和 mix-blend-mode 有什么区别？
Abackground-blend-mode 混合元素自身的多层背景（背景图之间、背景图与背景色之间）；mix-blend-mode 混合元素与其下层页面内容。前者作用于元素内部背景层，后者作用于元素整体与页面其他元素之间。想压暗背景图让文字更清晰，用 background-blend-mode 即可。
Q哪些混合模式最常用？
Amultiply（正片叠底）让颜色相乘整体变暗，适合给浅色纹理叠深色、压暗背景提高文字可读性；screen（滤色）整体提亮，适合发光效果；overlay（叠加）结合两者增强对比度。此外 darken/lighten 按通道取最值，difference 可做反色创意效果，效果类似 Photoshop 图层混合。
Qbackground-blend-mode 有哪些值？
A支持 16 个值：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。
Q如何用混合模式压暗背景图让文字更清晰？
A用 multiply 叠加深色背景色压暗背景图：background-image: url(bg.jpg); background-color: rgba(0,0,0,.5); background-blend-mode: multiply;。深色相乘使背景变暗、文字对比度提升。blend IE 不支持，需纯色兜底。
🏷️ 相关属性
💡 相关案例
📚 相关教程
