background-blend-mode 可实现多背景混合，如 .element{background-image:url('image1.jpg'),url('image2.jpg');background-color:#ffcc00;background-blend-mode:multiply;} 通过 multiply 等模式使图像与颜色叠加变暗；.tinted-image 使用 overlay 将粉色背景与照片融合，营造红调氛围；.multi-blend 设置多个背景图与渐变，按顺序应用 multiply 和 screen 混合模式，创造层次感；需注意背景层顺序、至少两个背景层才能生效，并在现代浏览器中测试兼容性。
CSS 的 background-blend-mode 属性可以让你在多个背景之间实现颜色叠加效果，类似于 Photoshop 中的图层混合模式。它适用于元素设置的多个背景图像和背景颜色之间的融合，能创造出丰富的视觉层次。
理解 background-blend-mode 的基本语法
background-blend-mode 定义了多个背景（图片或颜色）如何相互混合。它的值写在元素的 CSS 规则中，作用于该元素的所有背景层。
常见混合模式包括：- normal：默认值，无混合
- multiply：正片叠底，颜色变暗
- screen：滤色，颜色变亮
- overlay：叠加，结合 multiply 和 screen 效果
- darken：取较暗部分
- lighten：取较亮部分
- difference：差值，产生反差效果
使用方式如下：
.element {
background-image: url('image1.jpg'), url('image2.jpg');
background-color: #ffcc00;
background-blend-mode: multiply;
}
所有背景层（包括颜色）都会按指定模式混合。
立即学习“前端免费学习笔记（深入）”；
用背景颜色与图像叠加创造色调效果
你可以将纯色背景与图像结合，利用混合模式统一画面色调。比如让一张照片呈现暖黄或冷蓝的滤镜感。
.tinted-image {
width: 300px;
height: 200px;
background-image: url('photo.jpg');
background-color: #f06;
background-blend-mode: overlay;
background-size: cover;
}
这里图像与粉色背景通过 overlay 模式叠加，使照片整体染上红调，增强视觉氛围。
多图层背景的创意混合
当你为一个元素设置多个背景图像时，background-blend-mode 可以让它们自然融合。
.multi-blend {
width: 400px;
height: 300px;
background-image:
linear-gradient(45deg, transparent, #00f),
url('texture.png'),
url('photo.jpg');
background-blend-mode: multiply, screen;
background-size: cover;
}
注意：如果有多个混合模式，需按背景层顺序对应填写。上面例子中，最上层与中间层用 multiply 混合，中间与底层用 screen 混合。
实用建议与注意事项
使用 background-blend-mode 时，有几个关键点要留意：
- 确保设置了多个背景（图像或颜色），否则看不到混合效果
- 背景顺序很重要，CSS 中靠前的背景图在上方
- 不是所有浏览器都完全支持老版本的混合模式，建议测试主流现代浏览器
- 可结合 background-size、background-position 精细控制每层显示
基本上就这些。合理使用 background-blend-mode 能让你的页面背景更生动，不依赖图片编辑软件也能实现丰富的视觉合成效果。
