Transparent text which ignores the first background

Question

I don't know if this is possible in css, I am sure that it can be done in js but i don't know how...

I have a div with a background and a text that is in another div with another background. What I would like is the text to be transparent and have the first-background as the text background. I don't know if this is clear so I've created a fiddle for this:

<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

This technique is called clipping mask.

You can refer to DEMOS AND TUTORIALS ON CLIPPING MASK to achieve what you want.