使用 css 是不是可以使用图像作为文本颜色？ [复制]

Posted 2023-03-06

【中文标题】使用 css 是不是可以使用图像作为文本颜色？ [复制]

【英文标题】：With css is it possible to use an image for text color? [duplicate]使用 css 是否可以使用图像作为文本颜色？ [复制]

【发布时间】：2011-08-14 07:26:51

【问题描述】：

我可以通过某种方式将图像设置为文本颜色并让它在整个文本中重复来使文本纹理化吗？

【问题讨论】：

如果您需要广泛的浏览器兼容性，则必须使用 javascript。您对 JavaScript 解决方案感兴趣吗？

【参考方案1】：

纯 css 不可能。请参阅Textured Text上的上一篇文章

【参考方案2】：

我认为这是不可能的，抱歉。

你需要制作一张图片。

虽然如果你可以使用CSS masks 创建文本，它会起作用:)

【讨论】：

其实是可以的...-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url(your-image.jpg);

@SamuelChen 虽然可能没有回到 2011 年...

是啊哈哈才发现你可以像一年前那样做xd

【参考方案3】：

是的，您可以选择一种字体并对其进行更改，以便从实心块中剪切出轮廓（例如 this image 的“过度转向”字形，而不是“不稳定”字形）。您可以将此自定义字体嵌入到页面using CSS's @font-face，然后只需以正常方式应用背景（并确保适当的行高等）。