瞧瞧CSS3的混合模式

2018-06-19 18:35 更新
      熟悉Photoshop的伙伴肯定知道圖層間的混合模式（blend mode），利用混合模式，可以使圖片實現(xiàn)不同的效果，當(dāng)然，這里并不會跟你說Photoshop，而是CSS3的混合模式。

混合模式：指將上層的圖像融入下層圖像時采用的各種模式，根據(jù)您所選擇的模式，你會看到不同的融合后的效果。

在CSS3中，跟混合模式有關(guān)的屬性有兩個：mix-blend-mode和background-blend-mode。
那么，這兩個屬性可以干嘛呢？

可以實現(xiàn)背景與背景的混合、背景與文字的混合、背景與背景色的混合等等，下面看看這三個效果：


1、mix-blend-mode
mix-blend-mode默認(rèn)情況下是會混合所有比起層疊順序低的元素，它是應(yīng)用于多個元素，而且除背景外，元素內(nèi)的文字等其他內(nèi)容也會被混合，也可以這樣理解，它會把當(dāng)前元素和所有在其下方重疊的背景或元素都混和起來。

一般情況下有元素與元素的混合、元素與背景色的混合、元素與背景圖片的混合。

語法：
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
注意：如果源不是與背景顏色或背景圖像混合，必須保證兩個元素保持層疊關(guān)系（可以理解為重疊關(guān)系）。

我們來看看不同值之間的效果：


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

如果你使用了mix-blend-mode，它會把當(dāng)前元素和所有在其下方重疊的背景元素都混和起來。如果想讓一個與當(dāng)前元素重疊的元素不受混合模式的影響，該如何設(shè)置呢？

我們可以使用isolation屬性，isolation主要用來設(shè)置源是否與其他元素隔離。

語法：
isolation: auto | isolate
auto為默認(rèn)值，表示元素不隔離。如果想讓元素與其他元素隔離開來，需要將其屬性值設(shè)置為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是指背景的混合模式?？梢允潜尘皥D片之間的混合，也可以是背景圖片和背景色的混合。

語法：
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
假如我們要設(shè)置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;
}
我們來看看不同值的效果：


通過上面的效果圖，我們發(fā)現(xiàn)mix-blend-mode和background-blend-mode兩者設(shè)置相同參數(shù)時，效果是一樣的，但是請注意，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，應(yīng)該知道canvas中也支持混合模式，就是通過設(shè)置globalCompositeOperation屬性來采取何種混合模式，在這里就不多講這個，可以看另外一篇文章：Canvas入門基礎(chǔ)（六）：合成與裁剪

混合模式的簡要原理 混合模式本質(zhì)是分別取前景和背景（參與混合的兩個圖層）的像素點，然后用它們的顏色值進行數(shù)學(xué)運算，從而得到一個新的顏色值。每一個重疊區(qū)域的像素點都會經(jīng)過這個計算過程。
不同參數(shù)的公式算法可以看這里：https://drafts.fxtf.org/compositing-1/#valuedef-normal

兼容性
（1）mix-blend-mode


（2）background-blend-mode


對于這兩個參數(shù)，我也是剛剛了解，如有錯誤之處，歡迎指正！


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號