CSS background-blend-mode 属性
示例
指定背景图像的混合模式为“lighten”
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
background-blend-mode 属性定义了每个背景图层（颜色和/或图像）的混合模式。
| 默认值 | normal |
|---|---|
| 继承 | no |
| 可动画 | 否。 阅读关于可动画属性 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.backgroundBlendMode="screen" |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS 语法
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| normal | 这是默认值。将混合模式设置为 normal | 演示 ❯ |
| multiply | 将混合模式设置为 multiply | 演示 ❯ |
| screen | 将混合模式设置为 screen | 演示 ❯ |
| overlay | 将混合模式设置为 overlay | 演示 ❯ |
| darken | 将混合模式设置为 darken | 演示 ❯ |
| lighten | 将混合模式设置为 lighten | 演示 ❯ |
| color-dodge | 将混合模式设置为 color-dodge | 演示 ❯ |
| saturation | 将混合模式设置为 saturation | 演示 ❯ |
| color | 将混合模式设置为 color | 演示 ❯ |
| luminosity | 将混合模式设置为 luminosity | 演示 ❯ |
更多示例
示例
指定混合模式为“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;
}
自己动手试一试 »
相关页面
CSS 教程：CSS 背景
