1. 1. background-clip是个啥
  2. 2. background-clip的有效属性值
    1. 2.1. border-box
    2. 2.2. padding-box
    3. 2.3. content-box
    4. 2.4. text
  3. 3. 回到之前的问题
  4. 4. 做更多的事

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%)来实现反色滤镜

做更多的事

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

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