Escrever um texto (com fundo semi-transparente) sobre uma imagem

Um efeito que é muito comum ver sites e blogs de próxima geração, são escritos na sobreposição chamada sobre as imagens, muitas vezes acompanhada de um fundo escuro translúcido. Aqui está um exemplo:

Neste artigo, fazemos a substituição de nossas imagens usando CSS.

A primeira coisa a fazer é criar uma estrutura HTML como esta:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> Um belo pôr do sol! </ span>



  



 </ Div>







 </ Div>

Como você pode ver eu criei um recipiente DIV (com classe ". Boximg") dentro do qual eu posição minha imagem e um novo div (com classe ". Boxtesto"), que por sua vez contém um período que marca o texto que você deseja aplicar .

Vamos ver agora o CSS que, materialmente, coloque o trabalho:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * mesma largura da imagem * /



  



 height: 300px; / * A altura mesma imagem * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 left: 0px;



  



 width: 100%;



  



 background: rgb (0, 0, 0);



  



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







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



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



  



 letter-spacing: 1px-;







 }

A caixa de armazenamento (". Boximg") tem o mesmo tamanho e posicionamento em relação à imagem que se destina a acomodar.
A caixa de armazenamento do texto (". Boxtesto") é o foco do nosso trabalho tem o posicionamento absoluto, que remove o fluxo normal de elementos e é posicionado no canto inferior esquerdo de seu recipiente e, obviamente, tem uma largura de 100% para ocupar todo o espaço disponível na horizontal. Interessante, então, as duas definições do fundo usando rgb e rgba que servem para definir o fundo escuro e semi-transparente.
A extensão. "Text", finalmente, tem o único propósito para estilizar o texto e aplicar um padding 'pouco.

• <<
• 1
• 2
• >>