CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode

標籤: CSS CSS3

會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化,這個以往需要靠繪圖軟體才能完成的效果,現在利用 CSS3 的 mix-blend-mode 也可以做到囉,要使用這個效果前我們需要先讓東西可以疊在一起,可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。

之後就可以設定在上面的那層套用 mix-blend-mode,可以套用的屬性與說明如下:

Value Description
normal This is default. Sets the blending mode to normal
multiply Sets the blending mode to multiply
screen Sets the blending mode to screen
overlay Sets the blending mode to overlay
darken Sets the blending mode to darken
lighten Sets the blending mode to lighten
color-dodge Sets the blending mode to color-dodge
color-burn Sets the blending mode to color-burn
difference Sets the blending mode to difference
exclusion Sets the blending mode to exclusion
hue Sets the blending mode to hue
saturation Sets the blending mode to saturation
color Sets the blending mode to color
luminosity Sets the blending mode to luminosity

 

這邊給大家看一下實際的效果:

multiply:

 

screen:

 

difference:

 

目前各大瀏覽器除了 ie 外都支援了,就放心地用吧。

除了區塊外,背景也可以設定圖層混合效果,可以設定 background-blend-mode,值的話跟 mix-blend-mode 一樣,以下也來看看效果。