注意：只有使用最新版的谷歌瀏覽器、火狐瀏覽器，才能正確的顯示本文中的演示。

Photoshop里最沒有用處的一種功能——但也有人說是使其超出競爭對手的一種功能——就是混合模式(blend mode)。混合模式是指兩個像素點疊落到一起，用不同的方法混合它們的顏色。比如，darken顏色混合模式，就是選擇兩個像素中顏色更深的一個輸出。當將混合模式運用到整張圖片上時，會產生讓人驚訝的效果。

雖然并不是Adobe的Photoshop發明了混合模式，但它的實現效果是最真實的。可現在，你不需要使用Photoshop來運用混合模式美化你的圖片，因為CSS3里提供里動態的實現這種效果的方法。

瀏覽器支持情況

做為CSS3的新特征之一，各種瀏覽器對background-blend-mode屬性的支持情況還在改進中。對于早期的瀏覽器，需要在CSS里使用瀏覽器引擎前綴，或激活實驗性設置。根據caniuse.com報告顯示，Firefox 30，Chrome 35，Opera 22都是已經支持這個特征。

雖然IE現在仍然沒有實現對混合模式的支持，但混合模式是一種非常好的提高頁面美觀的工具，我們可以考慮在頁面中使用它。

background-blend-mode的用法

CSS3里提供了大量的混合模式的用法，但對于我們來說最有用處的一種用法是使用background-blend-mode。這個屬性能讓我們混合兩張圖片或混合一個圖片和一種背景色。

在下面的演示中我們將使用如下代碼：

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

使用的CSS：

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

下面我們就可以添加混合模式效果了。

我們需要添加另外一個CSS類，比如對于“multiply”模式：

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

然后我們再寫一個CSS規則：

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

Multiply 正片疊底

Multiply 正片疊底, 正如名稱示意的，用混合顏色來增重基色，產生一種更深的顏色。用黑色正片疊底的結果是黑色，用白色正片疊底的結果是圖片沒有任何變化。

background-blend-mode: multiply;

Screen 濾色

Screen 濾色是兩個像素色的逆向正片疊底。濾色和正片疊底正好相反，使用白色進行慮色會產生白色，使用黑色慮色的結果是圖像沒有變化。

background-blend-mode: screen;

Overlay 疊加

Overlay 疊加是一種復雜的混合模式。顏色變深的程度依賴于基色：淺色變的更淺，深色變得更深。

background-blend-mode: overlay;

Darken 變暗

Darken 變暗, 讓圖片更暗。它會選擇使用兩個重疊的像素中顏色更深的那個。

background-blend-mode: darken;

Lighten 變亮

跟變暗相反，lighten 變亮模式會選擇另個疊加的像素中顏色較輕的那個。

background-blend-mode: lighten;

Color dodge 顏色減淡

Color dodge 顏色減淡減小對比度使基色變亮以反映混合色。

background-blend-mode: color-dodge;

Color burn 顏色加深

Color burn 顏色加深 跟顏色減淡相反，通過增加對比度使基色變暗以反映混合色。

background-blend-mode: color-burn;

Hard light 強光模式

Hard light 強光模式“強光”模式將產生一種強光照射的效果。如果“混合色”顏色“基色”顏色的像素更亮一些，那么“結果色”顏色將更亮；如果“混合色”顏色比“基色”顏色的像素更暗一些，那么“結果色”將更暗。

background-blend-mode: hard-light;

Soft light 柔光模式

Soft light 柔光模式跟強光模式類似，“柔光”模式會產生一種柔光照射的效果。如果“混合色”顏色比“基色顏色的像素更亮一些，那么“結果色”將更亮；如果“混合色”顏色比“基色”顏色的像素更暗一些，那么“結果色”顏色將更暗，使圖像的亮度反差增大。

background-blend-mode: soft-light;

Difference 差值模式

Difference 差值模式 “差值”模式是將從圖像中“基色”顏色的亮度值減去“混合色”顏色的亮度值，如果結果為負，則取正值，產生反相效果。由于黑色的亮度值為0，白色的亮度值為255，因此用黑色著色不會產生任何影響，用白色著色則產生被著色的原始像素顏色的反相。

background-blend-mode: difference;

Exclusion 排除模式

Exclusion 排除模式與“差值”模式相似，但是具有高對比度和低飽和度的特點。比用“差值”模式獲得的顏色要柔和、更明亮一些。

background-blend-mode: exclusion;

Hue 色相模式

Hue 色相模式只用“混合色”顏色的色相值進行著色，而使飽和度和亮度值保持不變。當“基色”顏色與“混合色”顏色的色相值不同時，才能使用描繪顏色進行著色

background-blend-mode: hue;

Saturation 飽和度模式

Saturation 飽和度模式, “飽和度”模式的作用方式與“色相”模式相似，它只用“混合色”顏色的飽和度值進行著色，而使色相值和亮度值保持不變。當“基色”顏色與“混合色”顏色的飽和度值不同時，才能使用描繪顏色進行著色處理

background-blend-mode: saturation;

Color 顏色模式

Color 顏色模式能夠使用“混合色”顏色的飽和度值和色相值同時進行著色，而使“基色”顏色的亮度值保持不變。“顏色”模式模式可以看成是“飽合度”模式和“色相”模式的綜合效果。該模式能夠使灰色圖像的陰影或輪廓透過著色的顏色顯示出來，產生某種色彩化的效果。

background-blend-mode: color;

Luminosity 亮度模式

Luminosity 亮度模式能夠使用“混合色”顏色的亮度值進行著色，而保持“基色”顏色的飽和度和色相數值不變。其實就是用“基色”中的“色相”和“飽和度”以及“混合色”的亮度創建“結果色”。此模式創建的效果是與“顏色”模式創建的效果相反

background-blend-mode: luminosity;

總結

以上是生活随笔為你收集整理的CSS颜色混合模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。