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">
.blend
我們需要新增另外乙個css類，比如對於「multiply」模式：
"blend multiply">
.blend.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;
CSS顏色混合模式
注意 只有使用最新版的谷歌瀏覽器 火狐瀏覽器，才能正確的顯示本文中的演示。photoshop裡最沒有用處的一種功能 但也有人說是使其超出競爭對手的一種功能 就是混合模式 blend mode 混合模式是指兩個畫素點疊落到一起，用不同的方法混合它們的顏色。比如，darken顏色混合模式，就是選擇兩個畫...
關於顏色混合
ccsprite有乙個ccblendfunc型別的blendfunc 結構體成員，可以用來設定描繪時的顏色混合方案。ccblendfunc包含了乙個src和乙個dst，分別表示目標和源的運算因子。如果我們對乙個sprite使用setblendfunc方法，如 spritesetblendfunc c...
關於顏色混合
飛機大戰新增子彈的時候，子彈總是有背景的黑色，可以採用顏色混合的方法解決。在子彈初始化的時候 ccblendfunc cbl this setblendfunc cbl ccblendfunc 有兩個引數，第乙個引數代表源 也就是子彈 的顏色，第二個引數代表目標 也就是地圖背景 的顏色。1.glbl...