CSS background-blend-mode 属性

定义和用法

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 实例。

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|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;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。