瞧瞧CSS3的混合模式

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

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

在CSS3中,跟混合模式有关的属性有两个:mix-blend-modebackground-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


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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号