通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip:text 的作用。
利用 background-clip 图文搭配这样，我们可以选取合适的图片合适的字体，实现任意风格的文字效果。
CodePen Demo -- background-clip: text & Image text
又或者，利用这个效果实现一张创意海报：
利用 background-clip 实现渐变文字再者，利用这个属性，也可以轻松的实现渐变色的文字：
{ background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a); background-clip: text; }配合 background-position 或者 filter: hue-rotate()，让渐变动起来：
{ background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a); background-clip: text; animation: huerotate 5s infinite; } @keyframes huerotate { 100% { filter: hue-rotate(360deg); } }CodePen Demo -- background-clip: text 文字渐变色
利用 background-clip 给文字增加高光动画利用 background-clip， 我们还可以轻松的给文字增加高光动画。
譬如这样：
其本质也是利用了 background-clip，伪代码如下：
<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p> p { position: relative; color: transparent; background-color: #E8A95B; background-clip: text; } p::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%); background-clip: text; background-size: 150% 100%; background-repeat: no-repeat; animation: shine 5s infinite linear; } @keyframes shine { 0% { background-position: 50% 0; } 100% { background-position: -190% 0; } }去掉伪元素的 background-clip: text，就能看懂原理：
CodePen Demo -- shine Text && background-clip
mask 与文字还有一个与背景相关的属性 -- mask 。
之前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些 mask 的用法感到疑惑，可以再去看看。
只需要记住核心的，使用 mask 最重要结论就是：添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明。
利用 mask，我们可以实现各种文字的出场特效：
<div> <p>Hello MASK</p> </div>核心的 CSS 代码：
div { mask: radial-gradient(circle at 50% 0%, #000, transparent 30%); animation: scale 6s infinite; } @keyframes scale { 0% { mask-size: 100% 100%; } 60%, 100% { mask-size: 150% 800%; } }改变不同的方向，又或者是这样：
CodePen Demo -- MASK Text Effect
文字与混合模式(mix-blend-mode)及滤镜(filter)接下来，就到了非常有意思的混合模式及滤镜了。这两个属性给 CSS 世界增添了非常多的趣味性，活灵活用，会感叹 CSS 居然如此的强大美妙。
之前有多非常多篇关于混合模式及滤镜的文章，一些基础的用法就不再赘述。
给文字添加边框，生成镂空文字在 CSS 中，我们可以利用 -webkit-text-stroke，给文字快速的添加边框，利用这个，可以快速生成镂空型的文字：
p { -webkit-text-stroke: 3px #373750; }当然，我们看到，用到的属性 -webkit-text-stroke 带了 webkit 前缀，存在一定的兼容性问题。
所以，在更早的时候，我们还会使用 text-shadow，生成镂空文字。
p { text-shadow: 0 0 5px #fff; }可以看到，因为使用的是阴影，所以有很明显的虚化的感觉，存在一定的瑕疵。