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

Question

我有一个彩色背景。在此背景上，有一个白色透明图像或应用了覆盖整个屏幕的白色透明颜色。我需要的是，在这两个之上，我需要写文本，这个文本颜色应该自动从文本后面的彩色背景颜色中替换，如下图所示。背景颜色也不同。我怎样才能做到这一点？很抱歉，我没有提供任何 jsfiddle，因为我不确定该怎么做。

Answer 1

这是一个解决方案...

HTML:

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

CSS:

.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;
}

...但目前它有只能使用 webkit 的缺点。

• Here is the jsfiddle ，但请确保您使用的是最新的 Chrome。
• Here's another example使用 background-clip 和 text-fill-color。

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