CSS3混合模式種類
在CSS3混合模式中，目前僅有16種：normal，multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity。
其中每一種混合模式都有其自的計算模式
css3混合模式mix-blend-mode功能表格：
| Photoshop圖層 | CSS混合模式 | 中文名稱 | 功能描述 |
|---|---|---|---|
| normal | normal | 正常模式 | 混合色的像素會透過所用的顏色顯示出來 |
| multiply | multiply | 正片疊底模式 | 在“正片疊底”模式中，查看每個通道中的顏色信息，並將“基色”與“混合色”復合。 |
| screen | screen | 濾色模式 | “濾色”模式與“正片疊底”模式正好相反，它將圖像的“基色”顏色與“混合色”顏色結合起來產生比兩種顏色都淺的第三種顏色 |
| overlay | overlay | 疊加模式 | “疊加”模式把圖像的“基色”顏色與“混合色”顏色相混合產生一種中間色。 |
| darken | darken | 變暗模式 | 在“變暗”模式中，查看每個通道中的顏色信息，並選擇“基色”或“混合色”中較暗的顏色作為“結果色”。 |
| lighten | lighten | 變亮模式 | 在“變亮”模式中，查看每個通道中的顏色信息，並選擇“基色”或“混合色”中較亮的顏色作為“結果色”。 |
| color-dodge | color-dodge | 顏色減淡模式 | 在“顏色減淡”模式中，查看每個通道中的顏色信息，並通過減小對比度使基色變亮以反映混合色。與黑色混合則不發生變化。 |
| color-burn | color-burn | 顏色加深模式 | 在“顏色加深”模式中，查看每個通道中的顏色信息，並通過增加對比度使基色變暗以反映混合色，如果與白色混合的話將不會產生變化。 |
| hard-light | hard-light | 強光模式 | “強光”模式將產生一種強光照射的效果。如果“混合色”顏色“基色”顏色的像素更亮一些，那么“結果色”顏色將更亮；如果“混合色”顏色比“基色”顏色的像素更暗一些，那么“結果色”將更暗。 |
| soft-light | soft-light | 柔光模式 | 柔光”模式會產生一種柔光照射的效果。如果“混合色”顏色比“基色顏色的像素更亮一些，那么“結果色”將更亮；如果“混合色”顏色比“基色”顏色的像素更暗一些，那么“結果色”顏色將更暗，使圖像的亮度反差增大。 |
| difference | difference | 差值模式 | 在“差值”模式中，查看每個通道中的顏色信息，“差值”模式是將從圖像中“基色”顏色的亮度值減去“混合色”顏色的亮度值，如果結果為負，則取正值，產生反相效果。 |
| exclusion | exclusion | 排除模式 | “排除”模式與“差值”模式相似，但是具有高對比度和低飽和度的特點。比用“差值”模式獲得的顏色要柔和、更明亮一些。 |
| hue | hue | 色相模式 | “色相”模式只用“混合色”顏色的色相值進行着色，而使飽和度和亮度值保持不變。 |
| saturation | saturation | 飽和度模式 | “飽和度”模式的作用方式與“色相”模式相似，它只用“混合色”顏色的飽和度值進行着色，而使色相值和亮度值保持不變。 |
| color | color | 顏色模式 | “顏色”模式能夠使用“混合色”顏色的飽和度值和色相值同時進行着色，而使“基色”顏色的亮度值保持不變。“顏色”模式模式可以看成是“飽合度”模式和“色相”模式的綜合效果。 |
| luminosity | luminosity | 亮度模式 | “亮度”模式能夠使用“混合色”顏色的亮度值進行着色，而保持“基色”顏色的飽和度和色相數值不變。其實就是用“基色”中的“色相”和“飽和度”以及“混合色”的亮度創建“結果色”。 |
理論上的東西，着實讓人感到很煩，為了能更好的使用CSS的混合模式，我們可以將其分為幾個大類：
| 分類名稱 | 混合模式名稱 | 描述 |
|---|---|---|
| 基礎混合模式 | normal | 利用圖層透明度和不透明度來控制與下面的圖層混合 |
| 降暗混合模式 | darken,multiply,color-burn | 減色模式，濾掉圖像中高亮色，從而達到圖像變暗 |
| 加亮混合模式 | screen,lighten,color-dodge | 加色模式，濾掉圖像中暗色，從而達到圖像變亮 |
| 融合混合模式 | overlay,soft-light,hard-light | 用於不同程度的對上、下兩圖層的融合 |
| 變異混合模式 | difference,exclusion,hard-light | 用於制作各種變異的圖層混合 |
| 色彩疊加混合模式 | hue,saturation,color,luminosity | 根據圖層的色相，飽和度等基本屬性，完成圖層融合 |
CSS混合模式屬性
花了很大的篇幅在講理論性的東西，我想大家更為關注的是，如何通過CSS的屬性來達到這些混合模式的效果。接下來我們就通過介紹CSS的屬性來完成這部分內容。
CSS混合模式屬性主要包括mix-blend-mode、isolation和background-blend-mode三個屬性，接下來的內容我們將圍繞這三個屬性展開。
mix-blend-mode屬性
使用mix-blend-model屬性主要是用於源與背景顏色或背景圖像混合。
語法
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
其默認值為normal。具體使用方法如：
-
img {
-
mix-blend-mode: multiply;
-
}
mix-blend-model適用於所有元素。在SVG中，它適用於容器，圖形和引用的圖形。
注：如果源不是與背景顏色或背景圖像混合，必須保證兩個元素保持層疊關系。
混合模式的效果
mix-blend-model屬性可以取值normal、multiply等16種不同的混合模式，而且每種不同的混合模式得到效果將不一樣。接下來我們簡單的來展示不同混合模式取得效果。
HTML
為了更好的展示不同混合模式的效果，接下來的示例都將以下面的結構為例：
-
<body>
-
<img src="http://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg" alt="" />
-
</body>
正常模式(normal)
這是默認的混合模式，它指定了無混合模式。混合模式公式簡單的選擇了光源顏色。
-
body {
-
background-color: green;
-
}
-
img {
-
mix-blend-mode: normal;
-
}
這個效果看上去沒有任何的變化：
在Photoshop制作圖軟件中，當圖層混合模式取值為noraml時，改變源層的透明度，將達到不同的效果。那么我們來看看CSS混合模式中，是否具有相同的效果。
通過上面動畫演示，我們可以看出，在CSS混合模式中，取值為normal時，修改源透明度值，並不會影響混合模式效果。簡單點說，取值為normal時，沒有任何混合模式效果。
正片疊底模式（multiply）
取值為multiply時，源與背景疊在一起，結果色將會以背景為主。具體算法點擊這里查閱。
-
body{
-
background:green;
-
text-align: center;
-
}
-
img {
-
mix-blend-mode: multiply;
-
}
效果如下：
由此產生的結果色將變暗，或者以背景色呈現。當背景為黑色時，結果為黑色，背景為白色時，將保留源效果。
濾色模式(screen)
取值為screen時，背景色將作為源的補差色混合在一起。其具體算法點擊這里。
-
img {
-
mix-blend-mode: screen;
-
}
結果色總是比源或背景色更亮。當背景色為黑色時，源不變；反之，當背景色為白色時，源將變成白色。其效果如同投射多個攝影幻燈片到一個單一的屏幕上。
疊加模式(overlay)
具有multiply和screen顏色效果，最終取決於背景顏色是亮色還是暗色。具體算法點擊這里。
-
img {
-
mix-blend-mode: overlay;
-
}
源與背景色疊加並不會改變其亮度。背景色也不會被取代，但與源混合，將反應背景的亮度或暗度。如果背景色為亮色，效果更接近screen混合模式效果，如果背景色為暗色，效果更接近multiply混合模式效果。
overlay混合模式效果與后面介紹的hard-light混合模式剛好相反。
變暗模式(darken)
選擇源與背景色的暗色，得出結果色。具本算法點擊這里。
-
img {
-
mix-blend-mode: darken;
-
}
源顏色的暗色部分將被背景色替換，源顏色亮色部分將保持不變。
變亮模式(lighten)
lighten混合模式剛好與darken混合模式相反。結果色將選擇源與背景色亮色部分。具體算法點擊這里。
-
img {
-
mix-blend-mode:lighten;
-
}
源顏色的亮色部分將被背景色替換，其暗色部分將保持不變。
顏色減淡模式(color-dodge)
加亮背景顏色，以突出源顏色。此模式與黑色繪畫（源）配合不會產生任何效果。詳細算法點擊這里。
-
img {
-
mix-blend-mode:color-dodge;
-
}
顏色加深模式(color-burn)
與color-dodge混合模式相反，通過加暗背景顏色，以突出源顏色。此模式與白色繪畫配合不會產生任何效果。詳細算法點擊這里。
-
img {
-
mix-blend-mode:color-burn;
-
}
強光模式(hard-light)
它在較淺的像素上使用multiply模式，而在較深的像素上使用screen模式,主要取決於源色彩值。如同聚光燈強照在上面。具體算法點擊這里。
-
img {
-
mix-blend-mode:hard-light;
-
}
柔光模式(soft-light)
在較暗的顏色上使用darken模式，而在較亮的顏色上使用lighten，這主要取決於源色彩值。其效果是相似的背景下閃耀着擴散的聚光燈。具體算法請點擊這里。
-
img {
-
mix-blend-mode:soft-light;
-
}
差值模式(difference)
從亮度值中減去兩個混合色中暗度值，得出的混合效果。具體算法點擊這里。
-
img {
-
mix-blend-mode:difference;
-
}
如果背景色為白色，源混合之后的效果類似於相機底片效果；而背景色為黑色，源混合之后的效果無任何變化。
排除模式(exclusion)
與difference混合模式類似，但產生更柔和的結果色。具體算法點擊這里。
-
img {
-
mix-blend-mode:exclusion;
-
}
色相模式(hue)
“混合色”顏色的色相值進行着色，而使飽和度和亮度值保持不變。具體算法點擊這里。
-
img{
-
mix-blend-mode: hue;
-
}
飽和度模式(saturation)
與hue模式類似，“混合色”顏色的飽和度值進行着色，而使色相值和亮度值保持不變。具體算法點擊這里。
-
img {
-
mix-blend-mode:saturation;
-
}
顏色模式(color)
將源顏色的色相和飽和度與背景顏色亮度一起計算得出一個新的顏色。並且保留背景灰度值，給單色圖像上色或彩色圖像着色很有用。具體算法點擊這里。
-
img {
-
mix-blend-mode:color;
-
}
亮度模式(luminosity)
通過源顏色的亮色和背景顏色的色相、飽和度創建一個新的結果色。具體算法點擊這里。
-
img {
-
mix-blend-mode:luminosity;
-
}
以上簡單的展示了mix-blend-mode屬性中各個屬性值的效果(也就是混合模式效果)。當然，上面僅是一種背景顏色，在實際中，多彩效果也會略有不同。我看一個簡單的示例，在這個示例中，采用了red, orange, yellow, green, cyan, blue,purple七色。如：
-
body{
-
background-color: red;
-
text-align: center;
-
}
-
div {
-
width: 310px;
-
margin: 0 auto;
-
}
-
.orange{
-
background-color: orange;
-
height: 336px;
-
}
-
.yellow {
-
background-color: yellow;
-
height: 280px;
-
}
-
.green {
-
background-color: green;
-
height:224px;
-
}
-
.cyan {
-
background-color: cyan;
-
height:168px;
-
}
-
.blue {
-
background-color: blue;
-
height: 112px;
-
}
-
.purple {
-
background-color: purple;
-
height: 56px;
-
}
-
img {
-
mix-blend-mode:difference;
-
vertical-align: top;
-
}
效果如下：
上圖，每個橫條代表的是一種背景顏色與img的difference混合模式產生的效果，但最終還是回到了一個源與一個背景之間的一種混合模式。我們通過下面的簡短的動畫圖片能看出：
以此例為引，想向大家說一個現像，當你在<div>元素，添加透明度opacity，容器不能涉及到的源，將不會有混合模式效果。
上面展示的都是圖像與背景色之間的混合效果，其實還可以是文本與背景圖像之間產生混合模式效果：
<div class="multiply"> <p>multiply </p> </div> ...
在<div>上運用背景圖片，文本<p>上采用CSS混合模式：
-
div {
-
...
-
background: url(http: //www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg) center;
-
}
-
.multiply p {
-
mix-blend-mode: multiply;
-
}
-
...
不同的模式將得到不同的效果：
不過當背景圖片和文本顏色設置不一樣時，各種混合模式的結果將會完全不同。
除此之外，我們再來看看圖片與圖片之間的混合模式產生的效果。
-
<div class="multiply">
-
<p>multiply </p>
-
<img src= "http://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg" alt="" />
-
</div>
-
...
加上樣式：
-
div {
-
...
-
background: url(http: //www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg) center;
-
background-size: cover;
-
}
-
.multiply img {
-
mix-blend-mode: multiply;
-
}
-
...
效果如下：
isolation屬性
這個屬性主要用來設置源是否與其他元素隔離。我們簡單的來看一個示例。默認情況下，你使用了mix-blend-mode，它會把當前元素和所有在其下方重疊的背景元素都混和起來。
我們來改變.color和.bgimg的位置，讓這兩個元素移動到.img下面。看看img混合模式的效果變化。
如果要讓元素img的混合效果與其他元素不疊加，那就需要使用isolation屬性。
語法
isolation屬性使用方法非常簡單，其語法規則如下：
isolation: auto | isolate
其中auto為默認值，表示元素不隔離。如果想讓元素與其他元素隔離開來，需要將其屬性值設置為isolate。
正如剛才示例，如果需要圖片的混合模式只與.img元素(img的容器)有關系，那么就需要顯式的設置isolation：
-
.img {
-
isolation:isolate;
-
}
background-blend-mode屬性
background-blend-mode屬性用來定義元素背景層的混合模式。
通過3D盒模型示意圖，我們來回憶盒模型Z軸的層級關系：
從上圖我們可以很清晰的知道，元素的background-color是在background-image底下。在使用background-blend-model制作混合模式效果其實就是背景圖與其底下的背景顏色層疊。這種混合模式不能與元素內容融合在一起，換句話說他就是一個獨立體。
語法
background-blend-mode的語法規則和mix-blend-mode類似：
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
同樣其默認值為normal。
混合模式效果
background-blend-mode的各屬性所起的效果類似於mix-blend-mode，下面我們以一個簡單示例來做演示：
<div class="multiply"> <p>multiply </p> </div> ...
在<div>元素上運用background-blend-mode屬性：
-
div {
-
background-image: url(http: //www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg);
-
-
...
-
}
-
.multiply {
-
background-blend-mode: multiply;
-
}
效果如下：
使用background-blend-mode還可以對多背景圖使用混合模式，多個混合模式之間用逗號隔開。
在上例的基礎上，添加了一個徑向漸變制作的背景圖，並且去掉 outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px;">
-
div { -
background-image: radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75)),url(http://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg); -
... -
} -
... -
.multiply { -
background-blend-mode: multiply,normal; -
}
此時的效果變成：
其實這個就類似於mix-blend-model中圖片與圖片混合在一起的效果。不過在使用多背景時，他的背景有一個先后順序，處在最前面的背景圖片，他就在最頂上，對應的background-blend-model也按順序分配給背景圖片。我們來驗證一下，在上例的基礎上再添加一背景圖：
-
div {
-
...
-
background-image:
-
radial-gradient(circle at center, rgb( 220, 75, 200),rgb(0, 0, 75)),
-
url(http: //www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg),
-
url(http: //www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg);
-
}
-
.screen {
-
background-blend-mode: screen,screen,normal;
-
}
-
...
效果如下：
驗證一下背景圖層級之間對混合的影響，將漸變生成的圖像，換到中間去：
-
div {
-
background-image:
-
url(http://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test.jpg),
-
radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75)),
-
url(http://www.w3cplus.com/sites/default/files/blogs/2014/1406/css-blend-test2.jpg);
-
}
與上圖效果一對比，你就能發現他們之間的差異：
混合模式使用場景
前面的內容，主要針對性的介紹了圖片與背景色，圖片與圖片，文本與圖像、背景圖與背景色以及多背景圖之間混合模式的效果。除了上述場景之外，混合模式還可以運用於<svg>和<canvas>等元素之上。甚至還可以配合蒙板、漸變、動畫、濾鏡和視頻等制作更佳效果。
瀏覽器兼容性
CSS混合模式可以用於HTML任何元素上，但此技術是一個較新的技術，也可以說是一個實驗性的技術。所以目前瀏覽器對其支持性來說並不好，甚至可以說是極差。如果想看到下面實例中的效果，你必須通過一定的技術手段開啟瀏覽器的實驗性特性選擇項。我們拿Chrome為例(寫此教程我所用的版本 35.0.1916.114),在瀏覽器地址欄輸入chrome://flags，然后將“啟用實驗性網絡平台功能”選項中的“開啟”按鈕打開，打開之后，重啟您的瀏覽器，此按鈕會變成“停用”。如下圖所示：
對於Opera瀏覽器，你將“opera:flags”打開，並開啟相同的選擇項，而對於Firefox瀏覽器，你需要通過“about:config”來開啟相關選項。而Safari和IE瀏覽器到目前還不支持此功能。
另外CSS混合模式用於Canvas，SVG和img上，瀏覽器支持度並不一致。