css3 混合,瞧瞧CSS3的混合模式

熟悉Photoshop的伙伴肯定知道图层间的混合模式(blend mode)，利用混合模式，可以使图片实现不同的效果，当然，这里并不会跟你说Photoshop，而是CSS3的混合模式。

混合模式：指将上层的图像融入下层图像时采用的各种模式，根据您所选择的模式，你会看到不同的融合后的效果。

在CSS3中，跟混合模式有关的属性有两个：mix-blend-mode和background-blend-mode。

那么，这两个属性可以干嘛呢？

可以实现背景与背景的混合、背景与文字的混合、背景与背景色的混合等等，下面看看这三个效果：

1、mix-blend-mode

mix-blend-mode默认情况下是会混合所有比起层叠顺序低的元素，它是应用于多个元素，而且除背景外，元素内的文字等其他内容也会被混合，也可以这样理解，它会把当前元素和所有在其下方重叠的背景或元素都混和起来。

一般情况下有元素与元素的混合、元素与背景色的混合、元素与背景图片的混合。

语法：

mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

注意：如果源不是与背景颜色或背景图像混合，必须保证两个元素保持层叠关系(可以理解为重叠关系)。

我们来看看不同值之间的效果：

如果你使用了mix-blend-mode，它会把当前元素和所有在其下方重叠的背景元素都混和起来。如果想让一个与当前元素重叠的元素不受混合模式的影响，该如何设置呢？

我们可以使用isolation属性，isolation主要用来设置源是否与其他元素隔离。

语法：

isolation: auto | isolate

auto为默认值，表示元素不隔离。如果想让元素与其他元素隔离开来，需要将其属性值设置为isolate。

用法：

.isolation{

isolation:isolate;

}

看一个例子：

//第二幅图

//第三幅图

效果图：

2、background-blend-mode

background-blend-mode是指背景的混合模式。可以是背景图片之间的混合，也可以是背景图片和背景色的混合。

语法：

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

假如我们要设置background-blend-mode属性为multiply：

div{

background-image:url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg);

background-color:#0062CC;

background-blend-mode: multiply;

}

我们来看看不同值的效果：

通过上面的效果图，我们发现mix-blend-mode和background-blend-mode两者设置相同参数时，效果是一样的，但是请注意，mix-blend-mode是作用于多个元素的，而background-blend-mode是作用于背景与背景或背景与背景色的。

background-blend-mode还支持多背景混合：

//背景与渐变色

.mode1 .mm{

background:radial-gradient(red,blue),url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg);

background-blend-mode: screen,multiply;

}

//背景与背景

.mode2 .mm{

background:url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg),url(http://7s1r1c.com1.z0.glb.clouddn.com/t_leaf.jpg);

background-blend-mode: screen,multiply;

}

效果图：

3、Canvas的混合模式

如果你了解canvas，应该知道canvas中也支持混合模式，就是通过设置globalCompositeOperation属性来采取何种混合模式，在这里就不多讲这个，可以看另外一篇文章：Canvas入门基础(六)：合成与裁剪

混合模式的简要原理

混合模式本质是分别取前景和背景(参与混合的两个图层)的像素点，然后用它们的颜色值进行数学运算，从而得到一个新的颜色值。每一个重叠区域的像素点都会经过这个计算过程。

兼容性

(1)mix-blend-mode

(2)background-blend-mode

对于这两个参数，我也是刚刚了解，如有错误之处，欢迎指正！