Javascript 如何将颜色应用于背景上方的图像或对象？

我有丰富多彩的背景。在这个背景上有一个白色透明的图像或白色透明的颜色，覆盖整个屏幕。我需要的是，在这两个上面，我需要写文本，这个文本颜色应该自动从彩色背景色中替换出来，背景色在文本后面，如下图所示。背景颜色也会变化。我该怎么做？很抱歉，我没有给出任何JSFIDLE，因为我不知道如何做到这一点

这里有一个解决方案

HTML:

…但它的缺点是目前只使用webkit

• ，但请确保使用最新的Chrome浏览器
• 使用

  背景剪辑

  和

  文本填充颜色

---

最后，除非这种设计对您的网站至关重要，否则我建议您不要使用这种方法，而是寻找一种更简单的跨浏览器解决方案。

如果您完全不知道如何做到这一点，请雇人来帮您完成。听起来像是您在寻找某种解决方案。如果我理解正确，您可以使用JavaScript实现这一点。如果你想得到帮助，选择一个类似的设计，可能适合你的网站，你可以尝试或是，这是“只与webkit一起工作”，所以它不是一个最佳的解决方案，除非/如果其他浏览器实现这些样式选项。不幸的是，我不认为现在就可以做你想做的事情，让它在所有浏览器中都工作。

<div class="bg">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>

.bg {
    height: 100%; min-height: 20em;
    padding: 2em;
    /* Could be any background, including an image */
    background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
}
.overlay {
    background: rgba(255,255,255,0.4); /* translucent white */
}
.text {
    padding: 1em;
    font-family: 'Arial Black';
    font-size: 3em;
    text-align: center;
    /* Same background as bg */
    background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
    /* The magic happens here... */
    -webkit-background-clip: text;    
    -webkit-text-fill-color: transparent;
}