CSS的background-blend-mode属性用于定义元素的多重背景图层（背景图片之间、背景图片与背景颜色）以及背景与元素内容之间的混合方式。通过它，我们可以让背景不再只是简单堆叠，而是产生类似图像处理软件中的叠加、正片叠底等视觉效果。
基本语法
该属性接受一个或多个混合模式关键字，多个值用逗号分隔，分别对应每一层背景。常用写法如下：
.box {
background-image: url('bg.jpg');
background-color: #ff6600;
background-blend-mode: multiply;
}
常用混合模式
下面列出几种在项目中比较实用的模式及其直观表现：
- normal：默认模式，不混合，直接显示上层。
- multiply：正片叠底，颜色变暗，类似透明彩色纸叠加。
- screen：滤色，颜色变亮，适合做光效。
- overlay：叠加，结合明暗对比，增强层次。
- difference：差值，产生反相效果，常用于艺术化背景。
多背景图混合
当元素设置了多层背景图时，background-blend-mode的值按顺序一一对应，如果值少于背景层数，则重复最后一个值。
.card {
background-image: url('pattern.png'), url('photo.jpg');
background-color: #333;
background-blend-mode: screen, multiply;
}
与内容混合
默认情况下，background-blend-mode只混合背景各层。若希望背景与前景文字内容也混合，可使用isolation或配合mix-blend-mode处理子元素，但需要注意背景与内容混合更多由mix-blend-mode控制，background-blend-mode本身不直接混合子元素内容。
实际示例
以下代码让一张灰度风景图与蓝色背景以overlay模式融合，呈现出色调统一的banner：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.banner {
width: 100%;
height: 200px;
background-image: url('https://ipipp.com/demo.jpg');
background-color: #1e90ff;
background-size: cover;
background-blend-mode: overlay;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
}
</style>
</head>
<body>
<div class="banner">欢迎访问</div>
</body>
</html>
浏览器兼容提示
现代浏览器基本都支持background-blend-mode，但在一些老旧版本中可能需要加前缀或无法使用。实际开发前建议查阅兼容表，必要时提供纯色背景作为降级方案。
掌握background-blend-mode后，你可以少写很多叠层div，用纯CSS就完成丰富的背景视觉，让页面更轻量且易维护。
CSSbackground-blend-mode背景混合修改时间：2026-07-30 04:39:20