關於了一個我知道，但是從來沒有用過的css3屬性mix-blend-mode。做了一個小demo，再一次被css3 的強大所征服。
經常做圖片處理的人，比如用photoshop處理圖片，對混合模式一定不會陌生。在css3中，屬性mix-blend-mode其實就是ps中的混合模式（比如圖層的混合模式）。
混合模式Demo效果截圖
- OVERLAY
- SOFT-LIGHT
- HUE
線上演示Demo
codepen預覽
這個demo很簡單，一看應該就明白。透過不同的濾鏡蒙版來顯示渲染下面的背景圖。這裡的我隨便找了一張色彩比較豐富的圖片。某些混合模式下面還意外的得到了更加酷炫的效果。
（圖片來源於unsplash）
參考
說在最後
- 這裡容易忽略的一點是，mask_div裡面的文字也對下面的背景進行了混合，所以有的效果下，文字幾乎看不見。
background-blend-mode和這裡提到的mix-blend-mode極其的相似，不過前者是作用於背景，而後者作用於重疊的元素之間。- 這裡不得不提到的另一個屬性
isolation，這個屬性我好像還沒有怎麼完全弄清楚如何去理解和使用。但是很多情況下是要搭配上面兩個屬性使用的。