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

这种技术称为剪贴蒙版。

您可以参考 DEMOS AND TUTORIALS ON CLIPPING MASK 来实现您的目标。

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);

    }

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

2 个答案: