Escribir un texto (con semi-transparente de fondo) sobre una imagen

Un efecto que es muy común ver a los sitios y blogs de última generación, están escritos en la superposición de las llamadas sobre las imágenes, a menudo acompañada de un fondo transparente oscuro. He aquí un ejemplo:

En este artículo se hace la sobreescritura de nuestras imágenes usando CSS.

Lo primero que debe hacer es crear una estructura de HTML como este:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Una hermosa puesta de sol </ span>



  



 </ Div>







 </ Div>

Como se puede ver que he creado un contenedor DIV (con clase ". Boximg") en el que me la posición de mi imagen y un nuevo div (con clase ". Boxtesto") que a su vez contiene un lapso que marca el texto que desea aplicar .

Veamos ahora el CSS que, materialmente, el lugar de trabajo:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * mismo ancho de la imagen * /



  



 height: 300px; / * La altura de la imagen misma * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 inferior: 0px;



  



 izquierda: 0px;



  



 width: 100%;



  



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



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 fuente: Helvetica negrita 24px/45px, sans-serif;



  



 letter-spacing:-1px;







 }

La caja de almacenamiento (". Boximg") tiene el mismo tamaño y posición relativa a la imagen que se destina a acoger.
La caja de almacenamiento del texto (". Boxtesto") es el foco de nuestro trabajo tiene una posición absoluta, que lo elimina de la circulación normal de los elementos y se coloca en la esquina inferior izquierda de su contenedor y, obviamente, tiene un ancho de 100% para ocupar el espacio disponible en todo el horizontal. Interesante, entonces, las dos definiciones de fondo utilizando rgb rgb y que sirven para definir el fondo oscuro y semi-transparentes.
La luz. "Texto", por último, tiene el único propósito de estilizar el texto y aplicar un poco de relleno.

• <<
• 1
• 2
• >>