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 能让你的页面背景更生动，不依赖图片编辑软件也能实现丰富的视觉合成效果。