css mix-blend-mode 混合模式

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

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

0 696

此篇要介紹的是如何用 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: