CSS background-blend-mode属性

• 

  定义和用法

  background-blend-mode属性定义每个背景图层（颜色和/或图像）的混合模式。

  特征	说明
  默认值	normal
  继承	没有
  动画	没有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.backgroundBlendMode="screen"

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  属性	Internet Explorer	Chrome	FireFox	Safari	Opera
  属性名称
  background-blend-mode	不支持	35.0	30.0	7.1	22.0

• 

  CSS语法

  background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
• 

  实例

  指定混合模式为“lighten”：

  div { 
    width: 400px;
    height: 400px;
    background-repeat: no-repeat, repeat;
    background-image: url("img_tree.gif"), url("paper.gif");
    background-blend-mode: lighten;
  }

  尝试一下
• 

  属性值

  属性值	描述
  normal	这是默认的。 将混合模式设置为正常
  multiply	将混合模式设置为乘法
  screen	将混合模式设置为屏幕
  overlay	将混合模式设置为叠加
  darken	将混合模式设置为变暗
  lighten	将混合模式设置为变亮
  color-dodge	将混合模式设置为颜色减淡
  saturation	将混合模式设置为饱和度
  color	将混合模式设置为颜色
  luminosity	将混合模式设置为亮度

• 

  相关页面

  HTML教程：HTML样式

  CSS教程：CSS背景

  CSS教程：CSS背景（高级）