15種CSS混合模式讓圖片產生令人驚豔的效果

轉載地址:http://yusi123.com/3170.html

如果你曾經廣泛地使用過圖片編輯應用軟體（例如，Adobe Photoshop，Pixelmator，GIMP等），那麼你可能對混合模式比較熟悉。如同名稱中所暗示的，混合模式是指將上層的映像融入下層映像時採用的各種模式。根據您所選擇的模式，你會看到不同的融合後的效果。

混合模式採取鋪設在彼此頂部的兩個像素，並結合他們不同的方式進行展現，例如較深的顏色混合模式只會呈現兩個像素的顏色較深。 在擴充到整個映像時，混合模式可以產生一些令人驚豔的效果。

CSS混合模式提供了一種用於規定層與層之間如何相互影響及混合的方法。原來屬於圖片編輯應用軟體領域的一些效果實現，現在也可以可以通過CSS混合模式在web中實現。

當然，對前端非常感興趣的朋友還可以看看這些： 30個色彩配置十分精彩的網站設計作品欣賞 2014年前端開發非常實用的15個HTML&CSS架構 分享40個構建良好使用者介面所需的人性化解決方案 分享30個令你驚喜的視差滾動（Parallax Scrolling）效果網站 瀏覽器支援

按照現在情況來講, 瀏覽器支援 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開啟同樣的項目。

Firefox現在不支援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