javascript - 忽略第一个背景的透明文本

Question

我不知道这在css中是否可行，我确信它可以在js中完成，但我不知道如何......

我有一个带有背景的 div 和一个位于另一个具有另一个背景的 div 中的文本。我想要的是文本是透明的，并且具有第一背景作为文本背景。我不知道这是否清楚，所以我为此创建了一个小提琴：

<div id="first-background">
    <div id="second-background">
        <h1>This text should be transparent and have the first-background as its background and ignore the second background.</h1>
    </div>
</div>

http://jsfiddle.net/K2Ytv/

Answer 1

这种技术称为剪贴蒙版。

您可以参考剪贴蒙版上的演示和教程来实现您想要的。

Answer 2

你可以试试这个东西。

 #first-background{
        background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1zl6-e5P_loFXt6vq6aA50usSJwm2amdkqPaVSQums5KalLX4A);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 700px;
        height: 700px;
    }

    #second-background{
        background-color: red;
        opacity: 0.5;
        width: 700px;
        height: 435px;
    }
    h3{
        color: rgba(53,90,150,0.4);

    }