CSS mix-blend-mode属性

• 

  定义和用法

  mix-blend-mode属性指定元素的内容应如何与其直接父背景混合。

  特征	说明
  默认值	normal
  继承	没有
  动画	没有。CSS动画参考
  CSS版本	CSS3
  JavaScript语法	object.style.mixBlendMode = "darken"尝试一下

• 

  浏览器支持

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

  属性	IE/Edge	Chrome	FireFox	Safari	Opera
  属性名称
  mix-blend-mode	不支持	41.0	32.0	8.0	35.0

• 

  CSS语法

  mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
• 

  实例

  一个红色背景的容器和一个与红色容器混合的图像（变暗）：

  .container {
    background-color: red;
  }
  
  .container img {
    mix-blend-mode: darken;
  }

  尝试一下
• 

  属性值

  属性值	描述
  normal	这是默认的。 将混合模式设置为正常
  multiply	将混合模式设置为镶嵌
  screen	将混合模式设置为屏幕
  overlay	将混合模式设置为叠加
  darken	将混合模式设置为变暗
  lighten	将混合模式设置为变亮
  color-dodge	将混合模式设置为颜色减淡
  color-burn	将混合模式设置为颜色刻录
  difference	将混合模式设置为差异
  exclusion	将混合模式设置为排除
  hue	将混合模式设置为色调
  saturation	将混合模式设置为饱和度
  color	将混合模式设置为颜色
  luminosity	将混合模式设置为亮度

• 

  相关页面

  HTML教程：HTML样式