background–blend-mode 属性可实现css颜色与背景图片的自然融合，通过设置 multiply、screen 等混合模式控制叠加效果，结合渐变与背景图在同一元素中使用，能增强视觉层次，适用于复古、明亮等设计风格，需注意背景层顺序与浏览器兼容性。
在网页设计中，让CSS颜色与背景图片自然融合，可以大幅提升视觉表现力。实现这一效果的关键是 background-blend-mode 属性。它允许你控制背景颜色、渐变与背景图像之间的混合方式，类似于photoshop中的图层混合模式。
background-blend-mode 是什么？
background-blend-mode 定义了元素的背景层（如背景色、背景图、渐变）之间如何叠加和混合。它支持多种混合模式，每种都会产生不同的视觉效果。
常用语法：
background-blend-mode: <blend-mode> [, <blend-mode>]*;
其中 <blend-mode> 可以是 multiply, screen, overlay, darken, lighten 等。
立即学习“前端免费学习笔记（深入）”；
常见混合模式及效果
以下是一些常用的混合模式及其典型用途：
- multiply（正片叠底）：使颜色变暗，适合增强图片对比。白色透明，黑色保留。常用于文字背景强调。
- screen（滤色）：使颜色变亮，适合营造轻盈、通透感。黑色透明，白色保留。适合浅色主题融合。
- overlay（叠加）：结合 multiply 和 screen 的特点，增强图片的高光和阴影，突出纹理。
- darken（变暗）：比较颜色值，取较暗的一方。适合统一色调。
- lighten（变亮）：取较亮的颜色值，适合提亮整体画面。
实际使用示例
假设你想让一个半透明的红色覆盖在图片上，并与之融合：
<div style="background-image: linear-gradient(rgba(255, 0, 0, 0.5)), url('example.jpg'); background-blend-mode: multiply; width: 100%; height: 300px; background-size: cover;"> </div>
这里使用了 linear-gradient 创建一个红色半透明层，再通过 background-blend-mode: multiply 与背景图融合，产生一种复古或温暖的氛围。
如果换成 screen，整体就会变得更明亮，适合夜间模式或梦幻风格。
注意事项与兼容性
background-blend-mode 虽然功能强大，但使用时需注意：
- 确保背景图和颜色/渐变在同一元素上定义，否则无法混合。
- 多个背景图对应多个混合模式时，顺序要一致。
- 目前主流浏览器都支持该属性，但IE完全不支持，使用前建议检查项目兼容需求。
基本上就这些。合理运用 background-blend-mode，能让简单的颜色与图片产生丰富的视觉层次，无需额外切图或依赖js。