Criar um DIV com transparência

Março 2017


Você quer tornar um DIV transparente? Nada mais simples, basta utilizar uma das seguintes técnicas de CSS:

Tornar o DIV e seu conteúdo transparentes


  • O próprio DIV ficará transparente, assim como o conjunto do conteúdo, tal como as imagens ou o texto.

<div style="filter:alpha(opacity=50); opacity:0.5;">........</div> 

A propriedade opacity é suportada pelo firefox 3+, Chrome 2+, Safari 4 (não testada no 3) assim como no Opera 10. A propriedade filter:alpha(opacity=50) deixa o Internet Explorer 8 (não o 7) e o Opera 9.x torná-la transparente.

Tornar o DIV transparente, mas não o conteúdo

Utilizar a futura-propriedade propriedade CSS "rgba"


Para colocar uma cor em CSS, utilizamos a propriedade rgb(). Logo a função rgba() será utilizada. O "a", é claro, o canal alfa, a transparência:
<div style="background-color: rgba(255, 0, 0, 0.5)"> ....... </div> 
Aqui, a cor será o vermelho transparente.

Esta função não é reconhecida pelo Internet Explorer ou pelo Opera 9.x (porém, funciona com o Opera 10).

Seja astucioso


Eu explico:

Pegue um <div> contentor de texto e imagens. Dentro, coloque um div aberto e feche imediatamente. Vazio. É ele que permite tornar o fundo transparente, sem afetar o restante do texto. O DIV vazio será esticado até a borda do contentor DIV, mas por trás dele.

Exemplo:
<div style="posição: relativa; z-index: 10;"> 
   <div style=" background-color: #f00; posição:absoluta; z-index:-1; top:0; left:0; right:0; bottom:0; opacity:0.2;"></div> 
   ...... 
   ...... 
</div> 
  • Se o primeiro DIV tem um posicionamento relativo, é para colocar o z-index.
  • O div que permite a transparência tem o posicionamento absoluto e uma colagem de 0 px de cada lado, para que ele cubra o primeiro DIV, e um z-index de -1, para colocá-lo no primeiro.




Tradução feita por Lucia Maurity y Nouira


Veja também

Artigo original publicado por . Tradução feita por pintuda.
Este documento, intitulado 'Criar um DIV com transparência', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.