注意：只有使用最新版的谷歌瀏覽器、火狐瀏覽器，才能正確的顯示本文中的演示。css3
Photoshop裏最沒有用處的一種功能——但也有人說是使其超出競爭對手的一種功能——就是混合模式(blend mode)。混合模式是指兩個像素點疊落到一塊兒，用不一樣的方法混合它們的顏色。好比，darken顏色混合模式，就是選擇兩個像素中顏色更深的一個輸出。當將混合模式運用到整張圖片上時，會產生讓人驚訝的效果。web
雖然並非Adobe的Photoshop發明了混合模式，但它的實現效果是最真實的。可如今，你不須要使用Photoshop來運用混合模式美化你的圖片，由於CSS3裏提供裏動態的實現這種效果的方法。瀏覽器
瀏覽器支持狀況
作爲CSS3的新特徵之一，各類瀏覽器對background-blend-mode屬性的支持狀況還在改進中。對於早期的瀏覽器，須要在CSS裏使用瀏覽器引擎前綴，或激活實驗性設置。根據caniuse.com報告顯示，Firefox 30，Chrome 35，Opera 22都是已經支持這個特徵。wordpress
雖然IE如今仍然沒有實現對混合模式的支持，但混合模式是一種很是好的提升頁面美觀的工具，咱們能夠考慮在頁面中使用它。工具
background-blend-mode的用法
CSS3裏提供了大量的混合模式的用法，但對於咱們來講最有用處的一種用法是使用background-blend-mode。這個屬性能讓咱們混合兩張圖片或混合一個圖片和一種背景色。性能
在下面的演示中咱們將使用以下代碼：url
<div class="blend lazy "></div>
使用的CSS：spa
.blend
{ width:782px; height:540px; background:#3db6b8 url("lighthouse.jpg") no-repeat center center; }
下面咱們就能夠添加混合模式效果了。3d
咱們須要添加另一個CSS類，好比對於「multiply」模式：
<div class="blend multiply lazy "></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;