इसकी संभव शुद्ध एचटीएमएल 5

Question

मैं HTML में this effect बनाने की जरूरत में इस बनाने के लिए "Colhemos ideias, semeamos भविष्य ..."

यह संभव है?

असल में, यह 0.7 अस्पष्टता और इसके पीछे एक पृष्ठभूमि छवि के साथ एक सफेद बॉक्स है। पाठ सफेद बॉक्स में होना चाहिए, लेकिन अक्षरों को पृष्ठभूमि छवि को उनके माध्यम से दिखाने की अनुमति देने के लिए मास्क के रूप में कार्य करने की आवश्यकता है।

Answer 1

मैं एक पारदर्शी पीएनजी का उपयोग करूंगा जहां यह सफेद बॉक्स कंटेनर के समान सटीक चौड़ाई है।

http://jsfiddle.net/lollero/mAQe4/

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

वैकल्पिक रूप से, आप #content में opacity: o.8 उपयोग कर सकते हैं #footer

HTML:

<div id="content-wrap"> 
    <div id="content"> 
     Lorem ipsum dolor sit amet. 
    </div> 

    <img id="the-image" src="http://img220.imageshack.us/img220/4051/62739191.png" alt="" /> 

    <div id="footer"> 
     Lorem ipsum dolor sit amet. 
    </div> 
</div>​ 

सीएसएस:

html { 
    background: url('http://placekitten.com/850/850') repeat top left; 
} 


#content-wrap { 
    width: 200px; 
    margin: 0px auto; 
} 

#content, 
#footer { 
    background: url('http://img267.imageshack.us/img267/2733/21138012.png')repeat top left; 
} 

#the-image { width: 100%; display: block; } 

दूसरों पर इस पद्धति की एक विशाल लाभ यह है कि व्यापक ब्राउज़र सुनिश्चित करता है संगतता। फ़ायरफ़ॉक्स, सफारी, क्रोम और आईई के आज के नवीनतम संस्करणों को पारदर्शी पीएनजी का उपयोग करते समय इसे समान तरीके से संभालना चाहिए।

• http://www.jacklmoore.com/notes/ie-transparency-problems
• http://allinthehead.com/retro/338/supersleight-jquery-plugin

Answer 2

यह (सैद्धांतिक रूप से) छवि-मास्क के साथ संभव है, जो फिलहाल आधिकारिक मानकों का हिस्सा नहीं है। फिलहाल, मास्क केवल वेबकिट इंजन में उपलब्ध हैं।

समर्थन: http://caniuse.com/#search=mask

उदाहरण: http://trentwalton.com/2011/05/19/mask-image-text/

उसके अलावा, मेरे सिर के ऊपर से बाहर है, मुझे नहीं लगता कि यह शुद्ध सीएसएस + एचटीएमएल 5 के साथ संभव है है।

आपके उदाहरण के बारे में ... मुझे लगता है कि यह सिर्फ एक पारदर्शी .png है।