1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字

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

2021/07/27

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

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


Step1
首先,先用一個DIV放進一張背景圖片,接著在下層設定一個半透明的區塊,以及加入一個文字,並將此文字設為黑色。
梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字
Step2
接著這邊只要善用影像軟體的概念,要把黑色變透明,是不是就是使用濾色的屬性,這時再把半透明的區塊,加入mix-blend-mode: screen; 這時黑色就會被過濾掉,變成透明啦!
梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字
Step3
這樣就可實現”鏤空穿透”文字,完全免作圖,且還可隨時更換文字,因此只需多加利用CSS3的混合屬性,就可實作各種不同的特效啦!
梅問題-CSS3 混色模式mix-blend-mode,實現半透明區塊”鏤空穿透”文字
#範例預覽