CSS题目系列(4) - 文字穿透遮罩层
描述
在我刚开始学习前端开发不久的时候,曾在一个网站看到过一个效果,当时费尽脑筋,又是Canvas
、又是SVG
,还是无法实现(其实SVG
好像是有办法可以实现的,但当时觉得麻烦就没弄)。
效果就是这样的:
这个效果的难点在于,如何让文字穿透过遮罩层,但是这样好像很难。
直到最近,我看到了张鑫旭大神的一篇文章,文中讲述了如何给文字添加背景颜色(也可以是背景图片),顿时醍醐灌顶,想到了这样一个解决方案:
- 里外两个层,尺寸一样,设置同一个背景图片。
- 外层通过伪元素实现遮罩。
- 里层绝对定位,将背景添加到文字上。
可能我文字表达地不是很清晰,下面用代码讲解一下。
正文
如果你点进了上面张鑫旭大神的那篇文章,你就知道主要是两行:
-webkit-text-fill-color: transparent
-webkit-background-clip: text
简单说一下作用:
-webkit-text-fill-color: transparent
将文字颜色变成透明,但是经过尝试,发现使用
color:transparent
效果也一样,应该是浏览器为向后兼容所拟定的一个新属性,因为如果不支持文字添加背景,但又通过color:transparent
将文字变成了透明,文字就显示不出来了。
-webkit-background-clip: text
背景被裁剪为文字的前景色。
那么,下面我们试一下实现,这里只展示主要代码。
1 | <div class="container"> |
样式部分
1 | .container, |
在线查看,可以修改文字哦: 链接
完整代码:链接
后记
没错,这个困扰我多年的效果就是这么简单,果然还是懂得少,哪知道张鑫旭大神早在2011
年就给出了答案。
🥳 加载 Disqus 评论