javascript - 文本掩盖了背景

Question

您有一个带有文本的对象(例如 span 或 div)。并且此文本应遮盖对象的彩色背景，以便您可以看到背景(例如 body 元素)。

我知道有“mask-image”。但他们不想进一步开发这种 CSS3 技术。是否有 Javascript 解决方案，以便任何人都可以看到？

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

Answer 1

想不出在 javascript 或 html 中执行此操作的技术。然而，一种可以使用的方法(虽然不是完全可取 - 我意识到这将是耗时的)是创建一个透明的 .png对于每个字母，将字母的背景设置为透明，将图像的其余部分设置为某种颜色，然后使用它们。你必须为你想使用的每种颜色制作一整套。你也可以只制作一张图像，它是 .png 中的一个词。并使用更容易的东西。这将是使它适用于所有浏览器的唯一当前方法，包括较旧的浏览器，例如 IE6，在这些浏览器中，新技术不可用。

在我看来，目前这行不通的原因是，当您在 <div> 中包含文本时或 <span>即使文本是透明的，它也只会默认为 <div> 的颜色或 <span> .如果他们的背景设置为透明，那么什么也不会显示。相反，如果设置了颜色，则文本不会显示，因为它只会继承该颜色。