Escriure un text (amb semi-transparent de fons) sobre una imatge

Un efecte que és molt comú veure els llocs i blocs d'última generació, estan escrits en la superposició de les trucades sobre les imatges, sovint acompanyada d'un fons transparent fosc. Heus aquí un exemple:

En aquest article es fa la sobreescriptura de les nostres imatges usant CSS.

El primer que ha de fer és crear una estructura d'HTML com aquest:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Una bella posta de sol </ span>



  



 </ Div>







 </ Div>

Com es pot veure que he creat un contenidor DIV (amb classe ". Boximg") en què me la posició de la meva imatge i un nou div (amb classe ". Boxtesto") que al seu torn conté un lapse que marca el text que desitja aplicar .

Vegem ara el CSS que, materialment, el lloc de treball:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * mateix ample de la imatge * /



  



 height: 300px; / * L'altura de la imatge mateixa * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 inferior: 0px;



  



 esquerra: 0px;



  



 width: 100%;



  



 de fons: rgb (0, 0, 0);



  



 de fons: rgb (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



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



  



 letter-spacing:-1px;







 }

La caixa d'emmagatzematge (". Boximg") té la mateixa mida i posició relativa a la imatge que es destina a acollir.
La caixa d'emmagatzematge del text (". Boxtesto") és el focus del nostre treball té una posició absoluta, que l'elimina de la circulació normal dels elements i es col loca en la cantonada inferior esquerra del seu contenidor i, òbviament, té un ample de 100% per ocupar l'espai disponible a tot l'horitzontal. Interessant, llavors, les dues definicions de fons utilitzant rgb rgb i que serveixen per definir el fons fosc i semi-transparents.
La llum. "Text", finalment, té l'únic propòsit de estilitzar el text i aplicar una mica de farciment.

• <<
• 1
• 2
• >>