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

Question

我已经在SVG中看到它了:文本填充是图像而不是颜色; 我一直想知道使用CSS3是否可以做到这一点.

我环顾网络,到目前为止只找到了基本上覆盖图像而不是文本的解决方法(见这个,这对我来说不是一个可行的选择).除了实际上有文本的背景图像,是否可以有背景渐变？

Answer 1

CSS3添加了background-clip属性.您实际上可以使用-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;: