css mix-blend,详解CSS3的mix-blend-mode属性

1、相当于加了一个图层

mix-blend-mode: multiply;

2、相当于加了一个滤镜

mix-blend-mode: screen;

3、相当于加了一个图层和滤镜

mix-blend-mode: overlay;

4、会使图片变暗，出现变暗效果

mix-blend-mode: darken;

5、这个模式与darken相反，

* 它的效果取决于源和背景颜色之间更浅的(色彩)。

* 即将两像素的RGB值进行比较后，取高值成为混合后的颜色，

* 因而总的颜色灰度级升高，造成变亮的效果。

mix-blend-mode: lighten;

6、Color-Dodge模式加亮了背景颜色，

* 从而形成鲜明对比的图像。

mix-blend-mode:color-dodge;

7

这种模式加深了背景色，并且增加了源和背景色彩的对比度。

即让底层的颜色变暗，有点类似于正片叠底，但不同的是，

它会根据叠加的像素颜色相应增加底层的对比度。

*

mix-blend-mode: color-burn;

8

* 这种模式与overlay相反。它在较浅的像素上使用multiply模式，

* 而在较深的像素上使用screen模式。

* 作用效果如同是打上一层色调强烈的光，所以称之为强光。

mix-blend-mode: hard-light;

9

这种模式在较深像素上使用multiply模式，

而在较浅像素上使用screen模式。与overlay有些相似，

但有轻微的不同。作用效果如同是打上一层色调柔和的光，

因而被我们称之为柔光。

作用时将上层图像以柔光的方式施加到下层。

*

mix-blend-mode: soft-light;

10

color兼有色相和饱和度两种模式，

用当前层的色相值与饱和度替换背景图像的色相值和饱和度，

而亮度保持不变。

*

mix-blend-mode: color;

11

*

* 这种模式使用当前层的亮度值去替换背景图像的亮度值，

* 而色相值与饱和度不变。该模式产生的效果与Color模式刚好相反，

* 它根据上层颜色的明度分布来与下层颜色混合。

mix-blend-mode: luminosity;

12

要混合图层双方的RGB值中每个值分别进行比较，

用高值减去低值作为合成后的颜色，通常用白色图层合成一图像时，

可以得到负片效果的反相图像。

用黑色的话不发生任何变化(黑色亮度最低，下层颜色减去最小颜色值0，

结果和原来一样)，而用白色会得到反相效果(下层颜色被减去，得到补值)，

其它颜色则基于它们的亮度水平。

*

mix-blend-mode: difference;

​

​

​