给文字做涂鸦效果的五种实现方案

介绍

在很多创意网站上，我们都会见到很多文字涂鸦效果，本期我们就介绍五种方法来实现这些文字涂鸦效果，康康如何通过前端技术，一起来让你的网页更有创意吧。

当然在做之前，我们先准备一张涂鸦纹理图哟~

正文

background-clip

https://code.juejin.cn/pen/7112305112659263495

我们实际上需要一个将纹理图设置为背景的背景层和一个放置文本的前景层。然后设置 background-clip:text ，意味着，它将背景被裁剪成为文字的前景色，当然最后不要忘了 text-fill-color: transparent 让文字做透明填充，纹理效果才会凸显出来。

这个方法在我们的开发中也是最常见的一个方案，虽然常见但 background-clip:text 和 text-fill-color: transparent 都算是试验属性，要写上浏览器内核的前缀。兼容性马马虎虎吧，但是显现起来比较简单。

clip-path

https://code.juejin.cn/pen/7112350166690037768

<img style="clip-path: url(#clip);" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1