您有一个带有文本的对象（例如 span 或 div）。并且此文本应遮盖对象的彩色背景，以便您可以看到（例如 body 元素的）背景。
我知道有“面具图像”。但他们不想进一步开发这种 CSS3 技术。有没有 Javascript 解决方案，所以任何人都可以看到这个？
有没有机会做这个跨浏览器？
【问题讨论】：
标签： javascript html css
想不出在 javascript 或 html 中执行此操作的技术。但是，可以使用的一种方法（尽管并不完全可取 - 我意识到这将很耗时）是为每个字母创建一个透明的.png，将字母的背景设置为透明，其余的图像到某种颜色，然后使用那些。您必须为您希望使用的每种颜色制作一整套。您也可以只制作一张 .png 中的一个单词的图像，然后使用更容易的图像。这将是使其适用于所有浏览器的唯一当前方法，包括较旧的浏览器，例如 IE6，其中新技术不可用。
在我看来，这目前不起作用的原因是，当您在 <div> 或 <span> 中包含文本时，即使文本是透明的，它也只会默认为 @ 的颜色987654325@ 或<span>。如果他们的背景设置为透明，那么甚至什么都不会出现。相反，如果设置了颜色，则文本不会显示，因为它只会继承该颜色。
【讨论】：
visibility: hidden; position: absolute; 效果一致的文本。至于客户，如果你采用全词法，那将是一个大问题。如果您制作了一个包含 26 个字母的完整数组，也许还有一些数字和符号，那么您可以将它们的文本转换为 .png。不是很理想，但也许它可以工作。似乎付出了很多努力却没有多少回报。
看起来最接近完整的跨浏览器支持（不为文本中的每个字符使用图像）是here 显示的非常有限的技巧。但是，这些技巧不适用于摄影背景图像。
如果您不需要支持 IE8 或更早版本，您可以研究在 SVG 或 Canvas 中执行此操作。但请注意，3.0 之前的 Android 不支持 SVG，这排除了多达 85% 的现有 Android 设备。
Webkit 具有专有的background-clip:text 样式，但它仅适用于 Chrome 和 Safari。
使用color:transparent 文本被证明对此完全没用。
总的来说，最好的选择可能是画布，尤其是如果您可以找到为 IE8 和更早版本提供 VML 替代方案的 JS 库或 jQuery 插件（假设 VML 解决方案支持文本掩码），或者如果您可以为 IE8 及更早版本提供优雅降级回退选项，即使没有文本掩码也看起来足够。
另一个容易被忽视的解决方案：如果您可以使用页面上的当前文本在服务器上动态呈现图像（根据需要缓存它），然后将该图像提供给客户端，那么就不存在跨浏览器问题来处理。例如，这可以使用 GD 图形库在 PHP 中完成。
【讨论】：
background-clip:text 与 mask-image 相同。在 Firefox 中不起作用。无论如何，IE 都无所谓... ;) PHP 中的图像渲染确实是个好主意。没想到。