作者：SbCoco来源：iCSS前端趣闻
说起 background-clip ，可能很多人都很陌生。Clip 的意思为修剪，那么从字面意思上理解，background-clip 的意思即是背景裁剪。
我曾经在 从条纹边框的实现谈盒子模型[1] 一文中谈到了这个属性，感兴趣的可以回头看看。
简单而言，background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则。
与 box-sizing 的取值非常类似，通常而言，它有 3 个取值：
{?????background-clip:?border-box;??//?背景延伸到边框外沿（但是在边框之下）?????background-clip:?padding-box;?//?边框下面没有背景，即背景延伸到内边距外沿。?????background-clip:?content-box;?//?背景裁剪到内容区?(content-box)?外沿。?}?不过这些都不是本文的主角。本文的主角是 background-clip: text; ，当然现在只有 chrome 支持，所以通常想使用它，需要
-webkit-background-clip:text;。
何为 -webkit-background-clip:text
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
看个最简单的 Demo ，没有使用
-webkit-background-clip:text :
Clip???效果如下：
CodePen Demo - Clip[2]
使用 -webkit-background-clip:text
我们稍微改造下上面的代码，添加
-webkit-background-clip:text：
div?{???font-size:?180px;???font-weight:?bold;???color:?deeppink;???background:?url($img)?no-repeat?center?center;???background-size:?cover;???-webkit-background-clip:?text;?}?效果如下：
CodePen Demo - clip[3]
看到这里，可能有人就纳闷了，
，啥玩意呢，这不就是文字设置 color 属性嘛。
将文字设为透明 color: transparent
别急!当然还有更有意思的，上面由于文字设置了颜色，挡住了 div 块的背景，如果将文字设置为透明呢?文字是可以设置为透明的 color: transparent 。
div?{???color:?transparent;???-webkit-background-clip:?text;?}?效果如下：
CodePen Demo - clip[4]
通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以为的区域全部被裁剪了，这就是
-webkit-background-clip:text 的作用。
嗨起来
了解了最基本的用法，接下来可以想想如何去运用这个元素制作一些效果。
大大增强了文字的颜色填充选择
文字颜色的动画效果
配合其他元素，实现一些其他巧妙的用法
实现文字渐变效果
利用这个属性，我们可以十分便捷的实现文字的渐变色效果。
?background-clip:?text?div?{?????font-size:?54px;?????color:?transparent;?????background:?linear-gradient(45deg,?#ffeb3b,?#009688,?yellowgreen,?pink,?#03a9f4,?#9c27b0,?#8bc34a);?????background-clip:?text;?????animation:?huerotate?3s?infinite;?}??@keyframes?huerotate?{?????100%?{?????????filter:?hue-rotate(360deg);?????}?}?CodePen Demo -- background-clip: text 文字渐变色[5];
背景渐变动画 && 文字裁剪
因为有用到 background 属性，回忆一下，我在上一篇 巧妙地制作背景色渐变动画![6] 利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。
结合渐变动画，当然不一定需要过渡动画，这里我使用的是逐帧动画。配合
-webkit-background-clip:text，实现了一种，嗯，很红灯区的感觉：
保健沐足按摩