background-clip的正确使用姿势

background-clip的正确使用姿势

前几天遇到一个问题：问如何通过背景色来显示相反的文本颜色。 如果通过JS的话，可以灰常轻松的解决这个问题，但是纯用CSS的话也不是不可能的。 这就需要用到今天的主角background-clip了。

background-clip是个啥

background-clip可以用来控制背景图片／颜色的填充范围。 我们知道，默认的background会填充盒模型的content+padding+border区域内。（可以将border颜色设为透明进行观察）

image

image

现在，我们可以通过设置background-clip来控制背景填充的范围。

background-clip的有效属性值

border-box

设置填充范围到border，这个也是默认的选项。 图中的border应为浅灰色，因为后边有蓝色的背景色，所以导致border颜色变成了深蓝色。

image

padding-box

设置填充范围到padding，也就是说，border将不会有background的填充。

image

content-box

仅填充content区域。。

image

text

最后一个属性值，目前webkit上还没有标准版的实现，只能通过-webkit-background-clip来使用。 想要看到效果，我们需要将字体颜色设为透明 or 半透明。 效果如下：

image

来一个四种效果的对比图：

image

截图来自MDN

回到之前的问题

最开始我们说过的那个问题，如何根据背景色来显示反色文本。 实现方式如下：

1. background-color: inherit来继承父元素的属性值。
2. background-clip: text来确保背景色只会填充到文字区域
3. color: transparent来将文本颜色设为透明
4. filter: invert(100%)来实现反色滤镜

See the Pen aLWWeR by 贾顺名 (@Jiasm) on CodePen.

做更多的事

通过background-clip: text可以做很多有意思的事儿，比如说渐变色的文字。 结合着animation甚至可以实现动态的渐变色字体。

P.S. Animate.css首页的标题效果就是通过这个方式来实现的。

See the Pen GMoXaM by 贾顺名 (@Jiasm) on CodePen.