带有 CSS 的纹理文本？答案

【问题标题】：Textured Text with CSS?带有 CSS 的纹理文本？
【发布时间】：2011-04-16 07:43:27
【问题描述】：

我目前正在开发一个简单的页面。

有谁知道将纹理图像覆盖在文本上的任何方法？目前的规范似乎不可能，但如果可能，请告诉我。

谢谢，保重！

【问题讨论】：

标签： css

【解决方案1】：

不能单独使用纯 CSS，当然也不能以跨浏览器兼容的方式。最好将其设为透明的 .png 图像。

【讨论】：

谢谢 - 希望有一天浏览器可以很好地协同工作！ '在那之前，保重。

【解决方案2】：

您不能使用原生 CSS 2.1 将图像覆盖在文本上，这也不会在 CSS 3.0 中实现。最佳做法是使用背景图片并仍然使用 <h1> 标记中的文本并使用 CSS 将其隐藏。

<style>
h1 { background:url(images/imagepath.png) no-repeat; height:50px; width:300px; text-indent:-10000px; }
</style>

<body>
   <h1>Insert Text Here</h1>
</body>

【讨论】：

我也是这么想的。感谢您也努力输入 html。

【解决方案3】：

不知道为什么没有人回答这个问题。这可以使用background-clip：https://codepen.io/Grsmto/pen/ZomWEj

【讨论】：

...因为目前仅限于前缀为 webkit-only 的解决方案。
...不，不是。适用于所有现代浏览器。
您编辑了您的答案...然后回复，就好像我在评论编辑后的版本一样。您的原件是带有 webkit 前缀的。不管你喜不喜欢，12% 的市场份额仍然让 IE 成为主流浏览器。移动支持看起来也参差不齐（你知道，撰写本文时）。最重要的是，我认为它还没有。
我编辑是因为我认为读者可以自己添加不带前缀的版本。您还可以让用户根据他们的目标用户选择他们想要采用的任何解决方案。而不是努力让我的答案看起来像一个糟糕的答案（究竟是什么原因？...）。他们很高兴知道他们是否要支持 IE（还有，听说过“渐进式增强”吗？）。
只要人们知道它在 IE 上是不可行的并且在移动设备上是有问题的，我就很高兴。与个人无关。只是分享一些有用的信息。 :) 事实上，我建议将其添加到答案中，但这是您的决定。