css - 创建透明的透视或纹理字体样式

Question

是否可以指定字体样式（字体颜色等），以便我可以不使用纯色：

• 将一个 HTML 元素放在另一个元素之上，并使字体透明，这样我就可以让文本穿过顶部元素并通过字母区域查看底部元素的内容？

• 指定带有图像的文本（例如/至少没有动画），所以我可以使用纹理文本而不是纯色？

是否可以使用任何 CSS 级别/版本、HTML5 或某些本机 Web 浏览器规范？

是否可以至少使用 Canvas 检测每个字母的区域，还是应该完全手动完成，或者在纯 HTML/HTML5/CSS 中是不可能的？

Answer 1

我认为您所说的第一个类似于 Illustrator 中的剪贴蒙版？如果是这样，那么这里在 CSS-Tricks 上background-clip描述了一个功能，但是目前这仅在 webkit 浏览器中支持，我不确定 IE10，因为它比其他 IE 版本具有更多的兼容性。

快速谷歌搜索“带有 CSS 的图案文本”已显示此页面并对其进行了解释。

编辑 - - - - - - - -

对于 webkit 浏览器它是webkit-background-clip，对于 IE9+ 它只是background-clip

Answer 2

如果要为文本设置透明度，只需使用：

color: rgba(0, 0, 0, .5);

在此处查看更多信息http://www.w3schools.com/cssref/css_colors_legal.asp

我不知道是否有不同的方式来处理纹理化的字母，但你可以为文本编写一个解析器，将字母替换为图像文件。

Answer 3

您可以尝试使用要使用的文本创建一个svg 掩码，然后将 SVG 代码直接嵌入到 HTML中。这种方法应该适用于大多数现代浏览器。