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

Question

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

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

score 5 · Accepted Answer

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;：

score 2 · Accepted Answer

如果我明白你在说什么，不。您只能将文本设置为纯色，即使是 CSS3 的神奇奇迹。

2 回答 2