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.
A propriedade opacity é compatível com Firefox, Chrome, Safari, Opera e IE.
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.
Vejamos com um exemplo:
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
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
- Div transparente
- Div transparente css - Melhores respostas
- Transparencia div css - Melhores respostas
- Como deixar uma imagem com fundo transparente no paint - Dicas - Analógico e digital
- Oi dividas atrasadas - Dicas - Oi
- Imagem transparente gimp - Dicas - Gimp
- Como pagar dívida atrasada da vivo? - Dicas - Vivo
- Baixar whatsapp gb transparente ✓ - Fórum - Rede social
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!
