Tim Chen 已發佈 2019-10-17

CSS 文字鏤空與遮罩效果

前言

最近看了一部日劇「我要準時下班」,主角東山結衣是在 WEB 製作公司上班的女性,雖然劇中的主軸並非在開發網頁上,但是仍然有不少可以讓前端開發者感同身受的橋段,整體來說算是一部蠻推薦且輕鬆的日劇…

咳咳,好像離題了,你沒有走錯,這邊是技術分享的文章沒錯。

在這部劇中剛好看到一幕是他們設計的網頁的入口意象,入口意象的效果就類似於今天要介紹的文字鏤空效果,當下我就想說來學習要如何實作出這個效果,順便將我查詢到的資料統整紀錄下來。


效果展示🔗

images

可以看到左邊是原本的圖片,右邊是的話使用了 CSS 做文字的鏤空特效,接下來我將一步步分享如何達成這個效果。


效果一:文字的遮罩特效

-webkit-background-clip: text;
background-clip: text;
  1. 首先使用 background 設定背景圖片或顏色接著在區塊內輸入任何你想要的文字。

images

  1. 接著輸入 background-clip: text 剪裁掉文字以外的背景,之後的結果應該會如下圖一樣,你會發現背景圖片被剪裁掉了。

images

※因為 background-clip 目前還是實驗性的功能,並非正規支援的效果,所以如果需要在 Chrome 與 Safari 上使用必須得要加上前綴 -webkit-

  1. 使用 color: transparent 對文字設定透明屬性,這時候文字遮罩的效果就出來了,可以看到原本黑色的文字被取代成了我們的背景圖片,是不是非常簡單呢。

images

效果一:範例

HTML

<div class="wrap">
  CSS
</div>

CSS

.wrap {
  width: 100vw;
  height: 100vh;
  background: url("圖片位址") no-repeat left bottom;
  background-size: cover;
  font-size: 700px;
  text-align: center;
  line-height: 100vh;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

效果二:文字的鏤空特效

images

效果二其實與效果一概念是一樣的,簡單來說就是將剪裁過後的文字,餘起下方在新增一張原始圖片,視覺上就會有種鏤空的感覺。

  1. 首先新增一個區塊 .wrap 這一層是將來要放背景圖片的地方,接下來在 .wrap 之內新增 .layer 這層是要用來設定一層透明遮罩用的,再於 .layer 之內新增一個 span 用來存放鏤空文字,新增完結果應該如下所示。

HTML

<div class="wrap">
  <div class="layer">
    <span class="wrap">
      CSS
    </span>
  </div>
</div>
  1. 接下來針對 .wrap 新增背景圖片,所以我們目前有了兩張全屏的背景了,詳細程式碼如下所示。

CSS

.wrap {
  display: block;
  width: 100vw;
  height: 100vh;
  background: url("圖片位址") no-repeat center center;
  background-size: cover;
}

images

  1. 設定完背景,我們再針對 .layer 設定一層半透明的遮罩,此時會發現看不到半透明遮罩的效果,這是因為我們的 span.wrap 蓋在我們半透明的圖層之上 所以你才會覺得沒有效果,你可以試著註解掉 span.wrap 就會發現半透明遮罩顯現出來了,詳細程式碼如下所示。

CSS

.layer {
  background: rgba(255, 255, 255, 0.5);
  width: 100vw;
  height: 100vh;
}
  1. 上面步驟都做完之後,接下來就是要對文字進行鏤空的效果設定了,這部分的設定與效果一是一樣的,因為我的的 span 有設定背景,只要使用 background-clip: text 就可以對文字進行剪裁,如此一來文字鏤空的效果就達成了,詳細程式碼如下所示。

CSS

.layer .wrap {
  font-weight: bold;
  font-size: 700px;
  text-align: center;
  line-height: 100vh;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

images

  1. 總結來說,其實文字鏤空特效只是在一般的文字遮罩之後新增一層背景圖片與遮罩,使其擁有了鏤空的錯覺,只要善用此功能,你也可以自行設計出許多有特色的作品出來。

同場加映

background-clip 另類應用🔗


後記

總算打完了(呼~ 完結灑花~ 🌸🌸🌸
還請各位看倌多多指教,也歡迎交流。
這次介紹的視覺效果其實還能以別種方式來達成,這個我們下次在談。

Taking a break is for accomplishing a longer journey.

images

關於筆者

暱稱:Tim Chen

介紹:Medium:https://medium.com/@timchen0607

文章列表 文章列表