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

描述

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

效果就是這樣的：

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

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

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年就給出了答案。

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

原文連接