CSS顏色混合模式

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

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

雖然並不是adobe的photoshop發明了混合模式，但它的實現效果是最真實的。可現在，你不需要使用photoshop來運用混合模式美化你的，因為css3裡提供裡動態的實現這種效果的方法。

做為css3的新特徵之一，各種瀏覽器對background-blend-mode屬性的支援情況還在改進中。對於早期的瀏覽器，需要在css裡使用瀏覽器引擎字首，或啟用實驗性設定。根據caniuse.com報告顯示，firefox 30，chrome 35，opera 22都是已經支援這個特徵。

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

css3裡提供了大量的混合模式的用法，但對於我們來說最有用處的一種用法是使用background-blend-mode。這個屬效能讓我們混合兩張或混合乙個和一種背景色。

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

"blend">

使用的css：

.blend

下面我們就可以新增混合模式效果了。

我們需要新增另外乙個css類，比如對於「multiply」模式：

"blend multiply">

然後我們再寫乙個css規則：

.blend.multiply

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

background-blend-mode: multiply;

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

background-blend-mode: screen;

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

background-blend-mode: overlay;

darken 變暗, 讓更暗。它會選擇使用兩個重疊的畫素中顏色更深的那個。

background-blend-mode: darken;

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

background-blend-mode: lighten;

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

background-blend-mode: color-dodge;

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

background-blend-mode: color-burn;

hard light 強光模式「強光」模式將產生一種強光照射的效果。如果「混合色」顏色「基色」顏色的畫素更亮一些，那麼「結果色」顏色將更亮；如果「混合色」顏色比「基色」顏色的畫素更暗一些，那麼「結果色」將更暗。

background-blend-mode: hard-light;

soft light 柔光模式跟強光模式類似，「柔光」模式會產生一種柔光照射的效果。如果「混合色」顏色比「基色顏色的畫素更亮一些，那麼「結果色」將更亮；如果「混合色」顏色比「基色」顏色的畫素更暗一些，那麼「結果色」顏色將更暗，使影象的亮度反差增大。

background-blend-mode: soft-light;

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

background-blend-mode: difference;

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

background-blend-mode: exclusion;

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

background-blend-mode: hue;

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

background-blend-mode: saturation;

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

background-blend-mode: color;

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

background-blend-mode: luminosity;

best

css3

混合模式

背景背景圖

CSS顏色混合模式

CSS顏色混合模式

關於顏色混合

關於顏色混合

CSS顏色混合模式

CSS顏色混合模式

關於顏色混合

關於顏色混合

相關推薦