css - 在物理文本上使用背景图像/纹理？

Question

我在 SVG 中看到过:文本填充是图像而不是颜色；我一直想知道使用 CSS3 是否可以实现这样的事情。

我浏览了整个网络，到目前为止只找到了基本上将图像覆盖在文本上的解决方法(请参阅 this ，这对我来说不是一个可行的选择)。除了实际具有文本背景图像之外，是否可以具有背景渐变？

Answer 1

CSS3 添加了 background-clip属性(property)。您实际上可以使用 -webkit-background-clip: text 来做到这一点但 text 值是专有的，目前仅在基于 Webkit 的浏览器(Safari 和 Chrome)中实现。

h1 {
  font-size: 3em;
  background: url('someimage.png');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

一些使用-webkit-background-clip:text;的文章:

• > Gradient Text
• > Animated background clip text
• > Fun with -webkit-background-clip and @font-face