透明文字忽略第一个背景

Question

我不知道在css中是否可能实现这一点，但我确信可以在js中完成，只是我不知道怎么做...

我有一个带背景的div，里面有一个带另一个背景的div的文本。 我想要的是将文本设置为透明，并将第一个背景设置为文本背景。如果不清楚，我已经创建了一个fiddle来展示：

<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/

- emcee22

---

它已经完全按照你想要的去做了......？或者是我理解有误。 - Petr Čihula

我也不确定你的意思？你想用jQuery将第一个div的背景切换到第二个div吗？ - reyaner

请忽略 #second-background，只保留 #first-background 的透明文字内容。 - emcee22

那就不要在第二个 div 中设置背景色了，对吧？ - reyaner

Answer 1

这项技术称为剪切蒙版。

你可以参考剪切蒙版的演示和教程来达到你想要的效果。

- Nitesh

---

哇，这就是他要求的吗？太疯狂了，从来没有想到过... :) - reyaner

是的，我认为这就是它...但是这是CSS3，所以它不能在很多浏览器上工作 :'( （+1） - Balint Bako

是的，@BalintBako，这是一种CSS3技术。Webkit浏览器支持它。 - Nitesh

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

    }

- Ashish Sharma