Transparent văn bản mà bỏ qua các nền đầu tiên

Question

Tôi không biết nếu điều này là có thể trong css, tôi chắc chắn rằng nó có thể được thực hiện trong js nhưng tôi không biết làm thế nào ...

Tôi có một div với nền và văn bản nằm trong div khác với nền khác. Những gì tôi muốn là văn bản được minh bạch và có nền đầu tiên làm nền văn bản. Tôi không biết nếu điều này là rõ ràng nên tôi đã tạo ra một fiddle cho việc này:

<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

Kỹ thuật này được gọi là clipping mask.

Bạn có thể tham khảo DEMOS AND TUTORIALS ON CLIPPING MASK để đạt được những gì bạn muốn.

Answer 2

bạn có thể thử điều này.

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

    }