1
Obrigado

Algumas palavras de agradecimento nunca são demais.

Criar um DIV com transparência

O elemento DIV é empregado como container genérico para conteúdo de fluxo na linguagem HTML. A tag tem como função atribuir um estilo concreto à página web facilitando, ao mesmo tempo, a sua organização. Você gostaria de criar uma DIV transparente? É bem fácil, usando técnicas CSS, o que será demonstrado neste artigo.




Transformar a DIV e seu conteúdo no estilo transparente

Com esta linha de código, a DIV e seu conteúdo serão transparente: imagem e texto:
<div style="filter:alpha(opacity=50); opacity:0.5;">........</div>


A propriedade opacity é compatível com Firefox, Chrome, Safari, Opera e IE.

Fazer a DIV transparente, sem conteúdo

Utilizar a propriedade "rgba" de CSS

Para aplicar cor no CSS utilizamos a função rgba():
<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>


A cor neste exemplo, será vermelho transparente.

Saiba que, esta função não é reconhecida pelo navegador Internet Explorer nem pela versão 9 do Opera, embora o seja para a versão 10 do navegador.

Dica

Tomemos uma DIV como container de texto e imagem. Estando dentro dela, fazemos outra divisão (vazia) e a cercamos imediatamente. Isto permitirá que o fundo transparente se mantenha transparente, sem afetar o texto.

Vejamos com um exemplo:
<div style="position: relative; z-index: 10;"> <div style=" background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right: 0; bottom:0; opacity:0.2;"></div> …… …… </div>


Quando a primeira DIV possui um posicionamento relativo devemos saber que é para pôr o z-index.

A DIV, que permite a transparência, possui um posicionamento absoluto e está a 0 px de cada borda para cobrir a primeira DIV. Vemos uma z-index de -1 para coloca-la abaixo da primeira.

Foto: © Everypixel
Veja também
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.

Assine nossa newsletter!

Receba toda semana o melhor conteúdo

Assine nossa newsletter!