手册
目录
收藏523
分享
阅读1042
更新时间2025-07-16
background-blend-mode 属性定义每个背景层（颜色和/或图像）的混合模式。
CSS 教程：CSS 背景
把背景图像的混合模式指定为 "lighten"（变亮）：
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
您可以在页尾看到更多 TIY 实例。
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
| 值 | 描述 |
|---|---|
| normal | 默认。把混合模式设置为普通。 |
| multiply | 把混合模式设置为 multiply（乘）。 |
| screen | 把混合模式设置为 screen（屏幕）。 |
| overlay | 把混合模式设置为 overlay（覆盖）。 |
| darken | 把混合模式设置为 overlay（覆盖）。 |
| lighten | 把混合模式设置为 lighten（变亮）。 |
| color-dodge | 把混合模式设置为 color-dodge（颜色减淡）。 |
| saturation | 把混合模式设置为 saturation（饱和度）。 |
| color | 把混合模式设置为 color（颜色）。 |
| luminosity | 把混合模式设置为 luminosity（亮度）。 |
| 默认值： | normal |
|---|---|
| 继承： | 否 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.backgroundBlendMode="screen" |
把混合模式指定为 "multiply"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "screen"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "overlay"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "darken"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "color-dodge"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "saturation"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "color"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "luminosity"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
把混合模式指定为 "normal"：
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
