描述
在我剛開始學習前端開發(fā)不久的時候，曾在一個網(wǎng)站看到過一個效果疗锐，當時費盡腦筋，又是Canvas费彼、又是SVG滑臊，還是無法實現(xiàn)（其實SVG好像是有辦法可以實現(xiàn)的，但當時覺得麻煩就沒弄）箍铲。
效果就是這樣的：
image
這個效果的難點在于雇卷，如何讓文字穿透過遮罩層，但是這樣好像很難颠猴。
直到最近关划，我看到了張鑫旭大神的一篇文章，文中講述了如何給文字添加背景顏色（也可以是背景圖片）翘瓮，頓時醍醐灌頂贮折，想到了這樣一個解決方案：
- 里外兩個層，尺寸一樣资盅，設置同一個背景圖片调榄。
- 外層通過偽元素實現(xiàn)遮罩。
- 里層絕對定位呵扛，將背景添加到文字上每庆。
可能我文字表達地不是很清晰，下面用代碼講解一下今穿。
正文
如果你點進了上面張鑫旭大神的那篇文章缤灵，你就知道主要是兩行：
-webkit-text-fill-color: transparent-webkit-background-clip: text
簡單說一下作用：
-webkit-text-fill-color: transparent
將文字顏色變成透明，但是經(jīng)過嘗試，發(fā)現(xiàn)使用
color：transparent效果也一樣腮出，應該是瀏覽器為向后兼容所擬定的一個新屬性帖鸦，因為如果不支持文字添加背景，但又通過color：transparent將文字變成了透明利诺，文字就顯示不出來了富蓄。
-webkit-background-clip: text
背景被裁剪為文字的前景色。
那么慢逾，下面我們試一下實現(xiàn)，這里只展示主要代碼灭红。
<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年就給出了答案。
注：此文為原創(chuàng)文章娇斑，如需轉載策添，請注明出處。
