文字掩盖了背景

Question

你有一个带有文字的对象（例如span或div）。此文本应掩盖对象的彩色背景，以便您可以看到背景（例如身体元素）。

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

有没有机会进行跨浏览？

Answer 1

看起来最接近完全跨浏览器支持（不使用文本中每个字符的图像）是显示here的非常有限的技巧。然而，这些技巧不适用于照片bg图像。

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

Webkit具有专有的background-clip:text样式，但它仅适用于Chrome和Safari。

使用color:transparent来证明文本完全没用。

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

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

Answer 2

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

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