CSS3 mix-blend-mode 初探

DeCoder發表於2019-02-05

關於了一個我知道,但是從來沒有用過的css3屬性mix-blend-mode。做了一個小demo,再一次被css3 的強大所征服。

經常做圖片處理的人,比如用photoshop處理圖片,對混合模式一定不會陌生。在css3中,屬性mix-blend-mode其實就是ps中的混合模式(比如圖層的混合模式)。

混合模式Demo效果截圖

  • OVERLAY

image_1

  • SOFT-LIGHT

image_2

  • HUE

image_3

線上演示Demo

codepen預覽

這個demo很簡單,一看應該就明白。透過不同的濾鏡蒙版來顯示渲染下面的背景圖。這裡的我隨便找了一張色彩比較豐富的圖片。某些混合模式下面還意外的得到了更加酷炫的效果。

(圖片來源於unsplash

參考

說在最後

  • 這裡容易忽略的一點是,mask_div裡面的文字也對下面的背景進行了混合,所以有的效果下,文字幾乎看不見。
  • background-blend-mode 和這裡提到的mix-blend-mode極其的相似,不過前者是作用於背景,而後者作用於重疊的元素之間。
  • 這裡不得不提到的另一個屬性isolation,這個屬性我好像還沒有怎麼完全弄清楚如何去理解和使用。但是很多情況下是要搭配上面兩個屬性使用的。