CSS background-blend-mode 属性

实例

把背景图像的混合模式指定为 "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
继承:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.backgroundBlendMode="screen"

浏览器支持

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

属性 Chrome IE Firefox Safari Opera
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 默认。把混合模式设置为普通。
multiply 把混合模式设置为 multiply(乘)。
screen 把混合模式设置为 screen(屏幕)。
overlay 把混合模式设置为 overlay(覆盖)。
darken 把混合模式设置为 overlay(覆盖)。
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 背景

大林理惠影片