CSS3 混色模式mix-blend-mode，實現半透明區塊”鏤空穿透”文字

　　CSS3支援混色模式mix-blend-mode的屬性後，讓網頁圖片重疊時，也能像影像軟體一樣，製作出混合模式的效果，因此就可利用這個特性，實作出許多以前得透過影像軟體才實作出的圖像效果，現在只需要透過CSS3的混色模式就可辦到。

由於CSS3的混合模式的觀念與影像軟體中的圖層混合模式是一樣的，因此就可利用這個特性來實現出，鏤空的穿透文字效果，以前這得透過影像軟體，來製作，但現在只需要透過CSS3的ix-blend-mode的混色模式，立即就可實現，至於怎麼製作，現在就一塊來看看囉！

---

Step1
首先，先用一個DIV放進一張背景圖片，接著在下層設定一個半透明的區塊，以及加入一個文字，並將此文字設為黑色。

---

Step2
接著這邊只要善用影像軟體的概念，要把黑色變透明，是不是就是使用濾色的屬性，這時再把半透明的區塊，加入mix-blend-mode: screen; 這時黑色就會被過濾掉，變成透明啦！

---

Step3
這樣就可實現”鏤空穿透”文字，完全免作圖，且還可隨時更換文字，因此只需多加利用CSS3的混合屬性，就可實作各種不同的特效啦！

---

#範例預覽