CSS Blend Modes

2015-01-16

什么是CSS混合模式（CSS Blend Modes）

混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。
混合模式主要是一组不同的方式，这些方式用来确定当一个元素与另一个（部分或完全地）重叠时，图像的最终色彩应该是怎样的。本质上，这些模式就是源层和背景层颜色用数学表达的函数——例如RGBA，其中所有通道的值都在0和1之间——每一个特定的像素返回一个最终的数学值，最终确定该像素的颜色。每个混合模式用来确定颜色所使用的精确公式可以参考规范。现在，我们就来看看CSS中提供的不同混合模式分别产生了什么样的效果。

下面是一个简单的css混合模式的例子：

HTML代码

<div id="cssBlendDemo">
  <div class="just-color">
  </div>
  <div class="normal-image">
  </div>
  <div class="bg-blend">
  </div>
  <span class="clear"></span>
</div>

CSS代码


.clear{
    clear:both;
}
#cssBlendDemo{
    width:100%;
    height: 300px;
}
#cssBlendDemo div{
    float: left;
    width:200px;
    height: 300px;
}
#cssBlendDemo .just-color{
    background-color: red;
}
#cssBlendDemo .normal-image{
    background-image: url(/img/test.jpg);
}
#cssBlendDemo .bg-blend {
    background-image: url(/img/test.jpg);
    background-color: red;
    background-blend-mode: multiply;
}