sua possibile per creare questa in HTML puro 5

Question

ho bisogno di creare this effect in HTML "Colhemos ideias, semeamos futuro ..."

è possibile?

In sostanza, si tratta di una scatola bianca con un'immagine di sfondo dietro di esso 0,7 opacità e. Il testo deve essere nella casella bianca, ma le lettere devono agire come una maschera per consentire all'immagine di sfondo di mostrare attraverso di esse.

Answer 1

Vorrei usare un PNG trasparente dove è la stessa larghezza esatta come contenitore scatola bianca.

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

Ho anche scelto di utilizzare un'immagine PNG trasparente ripetendo per lo sfondo della scatola bianca per evitare differenze con la trasparenza tra il testo dell'immagine e del recipiente.

In alternativa, è possibile utilizzare opacity: o.8 in #content e #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>​ 

CSS:

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

Un enorme vantaggio di questo metodo rispetto ad altri è che garantisce ampia del browser Compatibilità. Le ultime versioni di Firefox, Safari, Chrome e IE di oggi dovrebbero gestirle allo stesso modo quando si utilizzano PNG trasparenti. Inoltre, se la compatibilità di IE è una priorità, ci sono modi per ottenere questo lavoro a partire fin da IE6:

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

Answer 2

Questo (teoricamente) è possibile con maschere di immagini, che al momento non fanno ancora parte degli standard ufficiali. Al momento, le maschere sono disponibili solo nei motori webkit.

supporto: http://caniuse.com/#search=mask

esempio: http://trentwalton.com/2011/05/19/mask-image-text/

Oltre a questo, dalla parte superiore della mia testa, non credo sia possibile con il puro CSS + HTML5.

Per quanto riguarda il tuo esempio ... Penso che sia solo un .png trasparente.