Rédiger un texte (avec semi-transparente de fond) sur une image

Un effet qui est assez fréquent de voir des sites et des blogs de prochaine génération, sont écrits dans la superposition dits sur les images, souvent accompagnées d'un fond foncé translucide. Voici un exemple:

Dans cet article, nous faisons l'écrasement de nos images en utilisant le CSS.

La première chose à faire est de créer une structure HTML comme ceci:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Un beau coucher de soleil! </ span>



  



 </ Div>







 </ Div>

Comme vous pouvez le voir, j'ai créé un conteneur DIV (avec la classe ". Boximg") dans lequel je place mon image et un nouveau div (avec la classe ". Boxtesto") qui contient à son tour une durée qui marque le texte que vous souhaitez appliquer .

Voyons maintenant le CSS que, matériellement, le lieu de travail:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * même largeur de l'image * /



  



 hauteur: 300px; / * La hauteur de l'image même * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 en bas: 0px;



  



 à gauche: 0px;



  



 width: 100%;



  



 background: rgb (0, 0, 0);



  



 Contexte: rgba (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 police: gras 24px/45px Helvetica, sans-serif;



  



 letter-spacing:-1px;







 }

La boîte de rangement (". Boximg") a la même taille et le positionnement par rapport à l'image qui est destiné à accueillir.
La boîte de rangement du texte (". Boxtesto») est le centre de notre travail a un positionnement absolu, qui le supprime de l'écoulement normal des éléments et est positionné dans le coin inférieur gauche de son conteneur et a évidemment une largeur de 100% à occuper tout l'espace disponible à l'horizontale. Intéressant, donc, les deux définitions de l'arrière-plan en utilisant rgb et rgba qui servent à définir le fond sombre et semi-transparente.
La durée. "Texte", enfin, a le seul but de styliser le texte et appliquer un peu de rembourrage.

• <<
• 1
• 2
• >>