谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text - ChokCoco_H5之家

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

谈谈一些有趣的CSS题目（十二）-- 深入探讨 CSS 特性检测 @supports 与 Modernizr

谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

谈谈一些有趣的CSS题目（十五）-- 奇妙的 background-clip: text

所有题目汇总在我的 Github 。

正文从这里开始。说起 background-clip ，可能很多人都很陌生。Clip 的意思为修剪，那么从字面意思上理解，background-clip 的意思即是背景裁剪。

我曾经在从条纹边框的实现谈盒子模型一文中谈到了这个属性，感兴趣的可以回头看看。

简单而言，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 :

<div>Clip</div> <style> div { font-size: 180px; font-weight: bold; color: deeppink; background: url($img) no-repeat center center; background-size: cover; } </style>

效果如下：

CodePen Demo

使用 -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

看到这里，可能有人就纳闷了，

wtf

啥玩意呢，这不就是文字设置 color 属性嘛。

将文字设为透明 color: transparent

别急！当然还有更有意思的，上面由于文字设置了颜色，挡住了 div 块的背景，如果将文字设置为透明呢？文字是可以设置为透明的 color: transparent 。

div { color: transparent; -webkit-background-clip: text; }

效果如下(请在 Chrome 内核浏览器下观看)：

CodePen Demo

通过将文字设置为透明，原本 div 的背景就显现出来了，而文字以为的区域全部被裁剪了，这就是 -webkit-background-clip:text 的作用。

各类效果制作

了解了最基本的用法，接下来可以想想如何去运用这个元素制作一些效果。

实现文字渐变效果

利用这个属性，我们可以十分便捷的实现文字的渐变色效果。

效果如下(请在 Chrome 内核浏览器下观看)：

CodePen Demo

背景渐变动画 && 文字裁剪

因为有用到 background 属性，回忆一下，我在上一篇巧妙地制作背景色渐变动画！利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。

结合渐变动画，当然不一定需要过渡动画，这里我使用的是逐帧动画。配合 -webkit-background-clip:text，实现了一种，嗯，很红灯区的感觉。

效果如下(请在 Chrome 内核浏览器下观看)：

CodePen Demo

图片窥探效果