Indtastning af tekst (med semi-gennemsigtig baggrund) over et billede

En effekt, der er ganske almindeligt at se hjemmesider og blogs næste generation, er skrevet i den såkaldte overlay over billederne, ofte ledsaget af en mørk gennemsigtig baggrund. Her er et eksempel:

I denne artikel vil vi gøre overskrivning af vores billeder ved hjælp af CSS.

Den første ting at gøre, er at oprette en HTML-struktur som denne:

 <div class="boximg">



  



 <img border="0" src="tramonto.jpg"/>



  



 <div class="boxtesto">



    



 <span class="testo"> En smuk solnedgang! </ span>



  



 </ Div>







 </ Div>

Som du kan se, at jeg har oprettet en div container (med klasse ". Boximg"), inden for hvilket placerer jeg mit billede og en ny div (med klasse ". Boxtesto"), som igen indeholder et spænd, der markerer den tekst, du ønsker at anvende .

Lad os nu se, CSS, at materielt, arbejdspladsen:

 . Boximg {



  



 position: relative;



  



 Bredde: 400px; / * Samme bredde af billedet * /



  



 højde: 300px; / * Det samme billede højde * /







 }







 {Div.boxtesto



  



 position: absolut;



  



 Nederst: 0px;



  



 venstre: 0px;



  



 bredde: 100%;



  



 Baggrund: rgb (0, 0, 0);



  



 Baggrund: RGBA (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: fed 24px/45px Helvetica, Sans-Serif;



  



 bogstav-afstand:-1px;







 }

Den opbevaringskasse (". Boximg") har samme størrelse og relativ positionering for at det billede, der er beregnet til at rumme.
Den opbevaringsboks af teksten (". Boxtesto") er fokus for vores arbejde er absolut positionering, som fjerner det fra den normale strøm af elementer og er placeret i nederste venstre hjørne af dets beholder, og selvfølgelig har en bredde på 100% til at udfylde hele pladsen vandret. Interessant, da de to definitioner af baggrunden ved hjælp af RGB og RGBA, der tjener til at definere den mørke baggrund og semi-transparent.
Spændvidden. "Text" endelig har det ene formål at stilisere teksten og anvende en lidt "polstring.

• <<
• 1
• 2
• >>