《轉》15種CSS混合模式讓圖片產生使人驚豔的效果

瀏覽器支持

按照如今狀況來說, 瀏覽器支持 CSSbackground-blend-mode屬性還在不斷的完善中。早期版本的瀏覽器目前還不支持，但caniuse.com報告說在Chrome，Firefox和Opera的最新版本都有良好的支持，使用Safari最快。

目前，基於Chromium的瀏覽器對CSS混和模式最爲支持（background-blend-mode和mix-blend-mode都支持）。爲了使Opera也支持，須要在opera地址欄中打開opera:flags，而後開啓Enable experimental Web Platform features一項。對於Chrome，你須要經過chrome://flags開啓一樣的項目。

火狐如今不支持isolation屬性，但你能夠先享用其它屬性，你須要打開about:config，而後搜索屬性並開啓。Safari和IE瀏覽器迄今仍不支持這些特性。

除非瀏覽器對其支持有所改善，最好仍是在你的設計中不要將CSS混和模式做爲重要的部分，而只是做爲既定設計中加強的效果。然而，出於演示的目的，你最好能在同時支持background-blend-mode和mix-blend-mode這兩個屬性的瀏覽器中打開連接內容。

background-blend-mode的工做原理

background-blend-mode屬性指定了源元素應該怎樣把本身的顏色同本身的背景圖片和背景顏色混和起來。若是該元素下還有任何其它的層（例如一個使用藍色背景顏色的section元素），它將不會把本身的顏色與該元素相混合。它只會把自身的顏色與CSS中爲其指定的背景圖像和顏色混和在一塊兒。

以下例所示：

background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;

若是你正在使用的是多個背景圖片，那麼你能夠分別爲它們應用多個背景圖片混和模式，例如：

background-image: url(images/sample1.png), url(images/sample2.png);
background-color: blue;
background-blend-mode: screen, overlay;

在上面的例子中， sample1.png圖片將會應用screen混和模式，而 sample2.png會應用overlay模式。

怎樣使用background-blend-mode屬性

CSS3的候選推薦標準中也有一些混合模式的選項，但目前最有用的是背景混合模式 ：background-blend-mode。 該屬性容許咱們混合兩個圖像，或一個圖像和一個背景顏色。

實例以下所示：

<div class="blend"></div>

這個是基類:

.blend
{
        width:780px;
        height:539px;
        background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}

如今，咱們準備添加混合模式。

要作到這一點，咱們要添加另外一個類到咱們的div，例如「multiply」：

<div class="blend multiply"></div>

而後咱們將建立第二個樣式規則：

.blend.multiply
 {
        background-blend-mode: multiply;
 }

若是你想看看全部的代碼能夠在這裏下載源文件。替換裏面的圖片路徑你就能夠看到展現效果。

正片疊底模式（Multiply）

Multiply, 正如它的名字所暗示的，它以混合色的像素爲基礎，因此會出現較暗的顏色。 黑色疊加結果爲黑色，白色疊加圖像不變。

background-blend-mode: multiply;

 

屏幕模式/濾色(Screen)

與正片疊底模式相反，合成圖層的效果是顯現兩圖層中較高的灰階，而較低的灰階則不顯現（即淺色出現，深色不出現），產生一幅更加明亮的圖像。

background-blend-mode: screen;

 

疊加模式(Overlay)

Overlay 是一個複雜的混合模式。 實際效果取決於基色：淺色變得更淺，暗色變的更暗。

overlay混和模式既有screen中的像素顏色變淺效果，也有multiply中的像素顏色加深效果。究竟使用何種模式，取決於底層的色彩，合成後有些區域圖變暗有些區域變亮

background-blend-mode: overlay;

 

變暗模式(Darken)

此模式的效果取決於源和背景顏色之間更深的（色彩），即混合兩圖層像素的顏色時，對這兩者的RGB值（即RGB通道中的顏色亮度值）分別進行比較，取兩者中低的值再組合成爲混合後的顏色。

background-blend-mode: darken;

 

變亮模式(Lighten)

這個模式與darken相反，它的效果取決於源和背景顏色之間更淺的（色彩）。即將兩像素的RGB值進行比較後，取高值成爲混合後的顏色，於是總的顏色灰度級升高，形成變亮的效果。

background-blend-mode: lighten;

 

顏色減淡(Color-Dodge)

Color-Dodge模式加亮了背景顏色，從而造成鮮明對比的圖像。它減淡亮基色下降對比度，以反映混合色。

background-blend-mode: color-dodge;

 

顏色加深(Color-Burn)

這種模式加深了背景色，而且增長了源和背景色彩的對比度。即讓底層的顏色變暗，有點相似於正片疊底，但不一樣的是，它會根據疊加的像素顏色相應增長底層的對比度。

background-blend-mode: color-burn;

 

強光模式(Hard-Light)

Hard light不管是multiply，或者screen 的顏色取決於混合色。這種模式與overlay相反。它在較淺的像素上使用multiply模式，而在較深的像素上使用screen模式。做用效果如同是打上一層色調強烈的光，因此稱之爲強光。

background-blend-mode: hard-light;

 

柔光模式(Soft-Light)

這種模式在較深像素上使用multiply模式，而在較淺像素上使用screen模式。與overlay有些類似，但有輕微的不一樣。做用效果如同是打上一層色調柔和的光，於是被咱們稱之爲柔光。做用時將上層圖像以柔光的方式施加到下層。

柔和的光線相似於強光線 ，但不是疊加或過濾的顏色，柔和的光線使用減淡和加深起了一個微妙的影響。

background-blend-mode: soft-light;

 

差值/差別模式(Difference)

要混合圖層雙方的RGB值中每一個值分別進行比較，用高值減去低值做爲合成後的顏色，一般用白色圖層合成一圖像時，能夠獲得負片效果的反相圖像。用黑色的話不發生任何變化（黑色亮度最低，下層顏色減去最小顏色值0，結果和原來同樣），而用白色會獲得反相效果（下層顏色被減去，獲得補值），其它顏色則基於它們的亮度水平。

background-blend-mode: difference;

 

排除模式(Exclusion)

exclusion混和模式與difference模式相似，但產生的圖像對比度更低一些。

background-blend-mode: exclusion;

 

色相/色調模式(Hue)

Hue取基色和混合色的顏色亮度和飽和度，並將它們合併。這種模式使用當前層的色相值去替換背景圖像的色相值，而飽和度與亮度不變。

background-blend-mode: hue;

 

飽和度模式(Saturation)

Saturation， 就像hue同樣，合併兩個具備混合色屬性的基本顏色值，而後進行飽和。

saturation用當前層的飽和度去替換背景圖像的飽和度，而色相值與亮度不變。

background-blend-mode: saturation;

 

顏色模式(Color)

color兼有色相和飽和度兩種模式，用當前層的色相值與飽和度替換背景圖像的色相值和飽和度，而亮度保持不變。

background-blend-mode: color;

 

亮度/明度模式(Luminosity)

這種模式使用當前層的亮度值去替換背景圖像的亮度值，而色相值與飽和度不變。該模式產生的效果與Color模式恰好相反，它根據上層顏色的明度分佈來與下層顏色混合。

background-blend-mode: luminosity;

 

有些人可能以爲不方便準確地記得每個混合模式的工做原理，因此咱們根據它們提供的通常效果，將它們分紅幾大類，這種方法是很是有用的。咱們能夠將全部這些模式分爲如下幾類：

• 變暗(Darkening)：darken, multiply, 和 color-burn模式，各自會按本身的方式，將圖像變暗。
• 變亮(Lightening)：lighten, screen 和 color-dodge模式，將圖像變得更亮。
• 對比度(Contrast)：overlay, soft-light 和 hard-light模式，將改變圖像對比度。
• 相對(Comparative)：difference 和 exclusion模式劃分到這個類別中。
• 成分(Component)：hue, saturation, color 和 luminosity模式劃分到這個類別中。其餘混合模式獨立做用於每一個顏色通道，而這個類中的模式則從源層挑出某一部分，而後把其它部分和背景層混和。

總結：

在網頁中，混合模式很是適合用於建立不一樣的效果，要是在之前，這種功能是使用Web技術沒法給咱們的。這是一個即將到來的技術，並且，在寫這篇文章的時候，瀏覽器的支持還不協調，但它只會隨着時間的推移變得更好。您能夠經過混和模式創造出一些精彩的調整和效果，因此在將來，你將再也不須要僅僅爲了給頁面中的圖形元素添加某種效果，而啓動一個照片編輯器的應用程序。

注：英文參考自15 CSS blend modes that will supercharge your images 和 Getting to know CSS Blend Modes