javascript - 文字掩盖了背景

Question

您有一个带有文本的对象（例如跨度或 div）。并且此文本应遮盖对象的彩色背景，以便您可以看到背景（例如主体元素）。

我知道有“面具图像”。但他们不想进一步开发这种 CSS3 技术。是否有一个 Javascript 解决方案，所以任何人都可以看到这个？

有没有机会做这个跨浏览器？

Answer 1

看起来最接近完整的跨浏览器支持（不为文本中的每个字符使用图像）是此处显示的非常有限的技巧。但是，这些技巧不适用于摄影背景图像。

如果您不需要 IE8 或更早版本的支持，您可以研究在 SVG 或 Canvas 中执行此操作。但请注意，3.0 之前的 Android 不支持 SVG，这排除了多达 85% 的现有 Android 设备。

Webkit 有一个专有的background-clip:text风格，但它只适用于 Chrome 和 Safari。

color:transparent事实证明，使用文本完全没有用。

总的来说，最好的选择可能是画布，特别是如果您可以找到为 IE8 及更早版本提供 VML 替代方案的 JS 库或 jQuery 插件（假设 VML 解决方案支持文本掩码），或者如果您可以提供优雅的-degradation IE8 和更早版本的后备选项，即使没有文本掩码，它看起来也足够了。

另一个容易被忽视的解决方案：如果您可以使用页面上的当前文本在服务器上动态呈现图像（根据需要缓存它），然后将该图像提供给客户端，那么就没有跨浏览器问题需要处理. 例如，这可以使用 GD 图形库在 PHP 中完成。

Answer 2

想不出在 javascript 或 html 中执行此操作的技术。但是，可以使用的一种方法（尽管并不完全可取 - 我意识到这将非常耗时）将为.png每个字母创建一个透明的，将字母的背景设置为透明，将图像的其余部分设置为一些颜色，然后使用那些。您必须为您希望使用的每种颜色制作一整套。您也可以只制作一个包含一个单词的图像，.png然后使用更容易的图像。这将是使其适用于所有浏览器的唯一当前方法，包括较旧的浏览器，例如 IE6，其中新技术不可用。

在我看来，这目前不起作用的原因是，当您在 a 内有文本时，<div>或者<span>即使文本是透明的，它也只会默认为<div>or的颜色<span>。如果他们的背景设置为透明，那么甚至什么都不会出现。相反，如果设置了它们的颜色，则文本不会显示，因为它只会继承该颜色。