CSS3混合模式mix-blend-mode/background-blend-mode

[chenxiaochun]

mix-blend-mode

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

正片叠底

百度百科的名词解释：

正片叠底，是计算机图形图像软件Adobe photoshop中的一种混合模式，存在于颜色混合模式、通道混合模式、图层混合模式的变暗模式组中，是用户使用频率较高的一种变暗模式。使用“正片叠底” 混合模式时一般不会产生色阶溢出，当调换基色和混合色的位置，结果颜色相同。

没看懂是吧？很正常。我一上来也看不懂。但你只要记住它的计算公式就行：

混合色 × 基色 / 255 = 结果色

我们用示例来验证一下，需要添加一段文字和一张图片：

<div class="box">
    <h2>这是一段文字这是一段文字</h2>
</div>

我给外面的容器设置了一个背景色，之所以使用纯色背景色，是因为这样更容易验证结果。如果使用那些色彩缤纷的背景图片，你是很难一眼看出来它的颜色变化结果是不是正确的。因为结果色的每个像素值都可能是不一样的。

.box{
    position: relative;
    width: 300px;
    height: 200px;
    background: rgb(83,213,247);
}
.box h2{
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 50px;
    white-space: nowrap;
    color: yellow;
    mix-blend-mode: multiply;
}

我在文字上应用了『正片叠底』的效果。可以看到处于蓝色底色上的文字颜色和其它区域的文字颜色明显是不同的。那么蓝色底色上的文字颜色为什么显示的是这样的色值呢？它的显示色值实际上就是上面提到的公式算出来的。

注：可参看 codepen 实例

所以，你把基色和混合色套入上面的公式，计算出来的结果肯定是结果色的色值。我们还可以得出这样两条规律：

• 当混合色为 0（黑色）时，则无论基色是什么色值，结果色都是黑色
• 当混合色为 255（白色）时，则无论基色是什么色值，结果色都和基色相同

基于这些理论，我做了这样一个示例：https://codepen.io/sjzcxc/pen/MrboBZ

滤色

百度百科的名词解释：

滤色是计算机图形图像软件Adobe photoshop中的一种混合模式，存在于颜色混合模式、通道混合模式、图层混合模式的变亮模式组中。使用“滤色”混合模式时一般不会产生色阶溢出，当调换基色和混合色的位置，结果色会不相同，混合后的效果类似于多个摄影幻灯片在彼此之上投影。

计算公式：

结果色 = 255 － [ (255－基色) × (255－混合色) ] / 255

注：可参看 codepen 实例

基色和混合色的色值都沿用了上面示例的色值，对文字应用了『滤色』效果之后，可以看到蓝色底色上面的文字看起来变成了白色，那究竟是不是白色呢？我们把基色和混合色套入公式，可以计算出结果色的色值是(255,255,247)，并不是纯白色的。

• 当混合色为 0（黑色）时，不论基色为何值，结果色均等于基色
• 当混合色为 255（白色）时，结果色等于白色

background-blend-mode

优秀示例

• https://tympanus.net/codrops/2017/12/21/css-glitch-effect/