阅读(2.7k) 书签赞(0) 我要纠错

瞧瞧CSS3的混合模式

2018-06-19 18:35 更新

熟悉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

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

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

混合模式公式可以看这里：https://drafts.fxtf.org/compositing-1/#valuedef-normal

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

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

语法：

isolation: auto | isolate

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

用法：

.isolation{   
  isolation:isolate;   
}

看一个例子：

<div class="mode">
  <div class="mode-inner multiply"> 
    <div class="mm">   
      <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg" rel="external nofollow"  rel="external nofollow"  alt="" />   
    </div>   
    <div class="leaf"></div>   
  </div>   
</div>

//第二幅图
<div class="mm isolation">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg" rel="external nofollow"  rel="external nofollow"  alt="" />   
</div>

//第三幅图
<div class="leaf isolation"></div>

效果图：

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入门基础（六）：合成与裁剪

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

不同参数的公式算法可以看这里：https://drafts.fxtf.org/compositing-1/#valuedef-normal

兼容性

（1）mix-blend-mode

（2）background-blend-mode

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

以上内容是否对您有帮助：

← 有趣的CSS像素

CSS API整理复习 →

写笔记

我要补充