css mix-blend-mode 混合模式

我把CSS變成Photoshop了!我跟mix-blend-mode有點熟

王曉涵 2022/09/22 14:00:00
218

此篇要介紹的是如何用 CSS 做出鏤空的穿透文字效果,以前只能透過影像軟體來製作,由於CSS mix-blend-mode混合模式的觀念同影像軟體的圖層混合模式,我們可以利用混合模式的特性來實現鏤空的穿透文字效果,現在我們一起來實作看看!

 

 

STEP 1 基本架構

首先我們先把基本架構定出來,將最外層的div放進一張背景圖片,接著再裡層的div放上一個半透明的色塊,位置可以隨自己喜好設定,加上文字,引入自己喜歡的字體,範例中使用的字體為芫荽字體,並將文字設定為黑色。

 

HTML:

<!-- 靜態實作範例 -->
<div class="mbm-static">
  <div class="mbm-whiteblock">
    <h1>美美的<br>鬱金香</h1>
  </div>
</div>

 

SCSS:

/* 引入字體檔,引入方式為下載字型檔後,在檔案內夾帶字型檔案 */
@font-face {
  font-family: "iansui-Regular";
  src: url("../font/Iansui094-Regular.ttf") format("truetype");
}

/* 靜態實作start */
/* 最外層的div */
.mbm-static {
  padding: 20px;
  width: 720px;
  height: 480px;
  background-image: url("../img/flower.jpg");
  background-size: cover;

  /* 半透明的色塊 */
  .mbm-whiteblock {
    padding: 20px;
    margin: 20px 0 0 20px;
    background-color: rgba(255, 255, 255, 0.85);
    width: 240px;
    height: auto;
    border-radius: 20px;

    /* 引入字型檔 */
    h1 {
      margin: 0;
      text-align: center;
      font-family: "iansui-Regular", sans-serif;
      color: #000;
      font-size: 48px;
    }
  }
}
/* 靜態實作end */

 

RESULT:

 

 

 

STEP 2 加上混合模式mix-blend-mode屬性

接著這邊只要善用影像軟體的概念,只要在.mbm-whiteblock 這個class裡面使用濾色的屬性mix-blend-mode: screen;,這時黑色就會被過濾掉,變成透明的了!

 

SCSS:

/* 靜態實作start */
.mbm-static {

  .mbm-whiteblock {
    mix-blend-mode: screen;
  }
}
/* 靜態實作end */

 

RESULT:

 

 

若想讓色塊底色為黑色,只需要把.mbm-whiteblock 這個class裡面使用濾色的屬性改成mix-blend-mode: multiply; 記得這邊要將文字顏色也改為白色,如下呈現

 

SCSS:

/* 靜態實作start */
.mbm-static {

  .mbm-whiteblock {
    background-color: rgba(0, 0, 0, 0.6);
    mix-blend-mode: multiply;

    h1 {
      color: #fff;
    }
  }
}
/* 靜態實作end */

 

RESULT:

 

 

 

STEP 3 完成!

這樣我們就完成了鏤空的文字效果啦!以前要到影像軟體內處理圖片處理文案,維護起來也相當不易,這個的好處是我們可以隨時更改文案內容、字體大小、自行等等,節省了非常多的時間,我們跟這屬性變熟了之後,多加利用他的混合特性,就可以實作出更多不同的特效。

 

 

 

 

參考來源:

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

 

2. 範例實作

 

 

王曉涵