CSS mix-blend-mode－直接在網頁呈現Photoshop的圖層混合模式

 作為網頁設計師肯定對製圖軟體Photoshop不陌生，

而現在可以直接用CSS呈現囉！

雖然目前的瀏覽器支援度很有限，

除了Opera與IE無法支援以外，Chrome和Firefox則可以不靠前綴即可呈現 。

CSS的mix-blend-mode屬性就跟Photoshop的圖層混合模式一樣，雖然不如Photoshop那麼多，但也高達十六種效果。

就讓我們看以下範例，可以比較各個色彩模式的呈現：

mix-blend-mode: normal 一般

預設值，沒有被混合。

mix-blend-mode: multiply 色彩增值

mix-blend-mode: screen 濾色

mix-blend-mode: overlay 覆蓋

mix-blend-mode: darken 變暗

mix-blend-mode: lighten 變亮

mix-blend-mode: color-dodge 加亮顏色（減淡）

mix-blend-mode: color-burn 加深顏色

mix-blend-mode: hard-light 實光

mix-blend-mode: soft-light 柔光

mix-blend-mode: difference 差異化

mix-blend-mode: exclusion 排除

mix-blend-mode: hue 色相

mix-blend-mode: saturation 飽和度

mix-blend-mode: color 顏色

mix-blend-mode: luminosity 明度