एचटीएमएल/सीएसएस: "पृष्ठभूमि के माध्यम से देखें" पाठ?

Question

ठीक है, यह संभव है।

मेरे पास पृष्ठभूमि छवि है। उस पर, मेरे पास सामग्री के लिए एक पारदर्शी ग्रे बॉक्स है। मैं टेक्स्ट में शीर्ष पर शीर्षक रखना चाहता हूं, मूल रूप से अक्षरों को पृष्ठभूमि को उजागर करना है। तो, पाठ ग्रे बॉक्स को हटा देता है और पृष्ठभूमि को दिखाता है।

एकमात्र हैकी तरीका मैं देख सकता हूं कि एक ही ग्रे रंग की पृष्ठभूमि पर पारदर्शी अक्षरों के साथ एक छवि बनाई गई है, और उसके बाद ग्रे बॉक्स के साथ किसी भी तरह संरेखित करने का प्रयास करें।

क्या कोई और बेहतर तरीका है?

Answer 1

एक तरीका -webkit-background-clip: text; का उपयोग करना है: demo here (वेबकिट केवल स्पष्ट रूप से)।

स्थिति का उपयोग करना, हम दोनों पृष्ठभूमि सिंक कर सकते हैं:

#container, #container h1 { 
    background: url(bg.png) 
} 

#container { 
    position: relative; 
} 

#container #gray { 
    background: rgba(0,0,0,.8); 
    padding-top: 8em; 
} 

#container h1 { 
    font-size: 8em; 
    padding-top: /* padding + border of div */; 
    position: absolute; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}​ 

या आप एक ही दृष्टिकोण का उपयोग और एक svg mask, कि सभी आधुनिक ब्राउज़रों में काम करेंगे लागू हो सकते हैं।