![梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字](http://photo.minwt.com/img/Content/CSS/css3-mix-blend-mode-txt/css3-mix-blend-mode_00.jpg)
由於CSS3的混合模式的觀念與影像軟體中的圖層混合模式是一樣的,因此就可利用這個特性來實現出,鏤空的穿透文字效果,以前這得透過影像軟體,來製作,但現在只需要透過CSS3的ix-blend-mode的混色模式,立即就可實現,至於怎麼製作,現在就一塊來看看囉!
Step1
首先,先用一個DIV放進一張背景圖片,接著在下層設定一個半透明的區塊,以及加入一個文字,並將此文字設為黑色。
![梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字](http://photo.minwt.com/img/Content/CSS/css3-mix-blend-mode-txt/css3-mix-blend-mode_01.jpg)
Step2
接著這邊只要善用影像軟體的概念,要把黑色變透明,是不是就是使用濾色的屬性,這時再把半透明的區塊,加入mix-blend-mode: screen; 這時黑色就會被過濾掉,變成透明啦!
![梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字](http://photo.minwt.com/img/Content/CSS/css3-mix-blend-mode-txt/css3-mix-blend-mode_02.jpg)
Step3
這樣就可實現”鏤空穿透”文字,完全免作圖,且還可隨時更換文字,因此只需多加利用CSS3的混合屬性,就可實作各種不同的特效啦!
![梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字](http://photo.minwt.com/img/Content/CSS/css3-mix-blend-mode-txt/css3-mix-blend-mode_03.jpg)
#範例預覽