css实现文字填充图片

发表于 | 分类于 | | 阅读次数:

CSS background-clip 属性

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

简单而言，background-clip 的作用就是设置元素的背景（背景图片或颜色）的填充规则。

与 box-sizing 的取值非常类似，通常而言，它有 3 个取值：

1
2
3
4
5
6

{
    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

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

将文字设为透明 color: transparent

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

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

1
2
3
4
5
6
7
8

img {
  background: url(true.jpg) no-repeat;
  background-origin: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

各类效果制作

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

  • 大大增强了文字的颜色填充选择
  • 文字颜色的动画效果
  • 配合其他元素，实现一些其他巧妙的用法
  • 文字的渐变色效果。

其实还有很多有趣的用法，只要敢想并动手实践，会发现 CSS 真的乐趣挺多的。