CSS題目系列（4） - 文字穿透遮罩層

4Ark發表於2018-11-26
CSS穿透遮罩

描述

在我剛開始學習前端開發不久的時候，曾在一個網站看到過一個效果，當時費盡腦筋，又是Canvas、又是SVG，還是無法實現（其實SVG好像是有辦法可以實現的，但當時覺得麻煩就沒弄）。

效果就是這樣的：

CSS題目系列（4） - 文字穿透遮罩層

這個效果的難點在於，如何讓文字穿透過遮罩層，但是這樣好像很難。

直到最近，我看到了張鑫旭大神的一篇文章，文中講述瞭如何給文字新增背景顏色（也可以是背景圖片），頓時醍醐灌頂，想到了這樣一個解決方案：

  1. 裡外兩個層，尺寸一樣，設定同一個背景圖片。
  2. 外層通過偽元素實現遮罩。
  3. 裡層絕對定位，將背景新增到文字上。

可能我文字表達地不是很清晰，下面用程式碼講解一下。

正文

如果你點進了上面張鑫旭大神的那篇文章，你就知道主要是兩行：

  1. -webkit-text-fill-color: transparent
  2. -webkit-background-clip: text

簡單說一下作用：

-webkit-text-fill-color: transparent

將文字顏色變成透明，但是經過嘗試，發現使用color：transparent效果也一樣，應該是瀏覽器為向後相容所擬定的一個新屬性，因為如果不支援文字新增背景，但又通過color：transparent將文字變成了透明，文字就顯示不出來了。

-webkit-background-clip: text

背景被裁剪為文字的前景色。

那麼，下面我們試一下實現，這裡只展示主要程式碼。

<div class="container">
	<h1>I ❤ CSS</h1>
</div>
複製程式碼

樣式部分

.container,h1{
    background:url("https://gd4ark.github.io/CSS-Carousel/image/2.jpg");
    background-size: 100% 100%;
}
.container h1,
.container::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.container{
    position: relative;
    width: 100%;
    height: 100vh;
}
.container::after{
    content: '';
    background: rgba(0,0,0,0.8);
}
h1{
    z-index: 2;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
複製程式碼

線上檢視，可以修改文字哦： 連結

完整程式碼：連結

後記

沒錯，這個困擾我多年的效果就是這麼簡單，果然還是懂得少，哪知道張鑫旭大神早在2011年就給出了答案。

注：此文為原創文章，如需轉載，請註明出處。

原文連結

相關文章