Skrive tekst (med semi-transparent bakgrunn) over et bilde

En effekt som er ganske vanlig å se nettsteder og blogger neste generasjon, er skrevet i den såkalte overlay over bildene, ofte ledsaget av en mørk gjennomsiktig bakgrunn. Her er et eksempel:

I denne artikkelen gjør vi overskriving av våre bilder ved hjelp av CSS.

Det første du må gjøre er å lage en HTML struktur som dette:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



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



  



 </ Div>







 </ Div>

Som du kan se jeg laget en DIV container (med klassen ". Boximg") innen hvilke jeg min posisjon image og en ny div (med klassen ". Boxtesto") som igjen inneholder et spenn som markerer den teksten du ønsker å bruke .

La oss nå se på CSS at materielt, arbeidsplassene:

 . Boximg {



  



 position: relative;



  



 bredde: 400 piksler; / * Samme bredden på bildet * /



  



 Høyde: 300px; / * Det samme bildet høyde * /







 }







 {Div.boxtesto



  



 posisjon: absolutt;



  



 bunn: 0px;



  



 venstre: 0px;



  



 Bredde: 100%;



  



 bakgrunn: rgb (0, 0, 0);



  



 bakgrunn: RGBA (0, 0, 0, 0.6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: fet 24px/45px Helvetica, sans-serif;



  



 brev-avstand:-1px;







 }

Den oppbevaringsboks (". Boximg") har samme størrelse og relativ posisjonering til bildet som er ment å imøtekomme.
Den oppbevaringsboks av teksten (". Boxtesto") er fokus for vårt arbeid har absolutt posisjonering, som fjerner den fra normal flyt av elementer og er plassert i nedre venstre hjørne av beholderen sin, og tydeligvis har en bredde til 100% å okkupere hele den tilgjengelige plassen horisontalt. Interessant, da de to definisjonene av bakgrunnen med RGB og RGBA som tjener til å definere den mørke bakgrunnen og semi-transparent.
Den spenner. "Tekst", endelig, har det formål å stylize teksten og bruke en litt "polstring.

• <<
• 1
• 2
• >>