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
- Div transparente
- Div transparente css - Melhores respostas
- Como deixar uma div transparente - Melhores respostas
- Fundo transparente paint - Dicas -Analógico e digital
- Código cor transparente - Dicas -Visual Basic
- Como deixar uma imagem transparente no excel - Dicas -Excel
- Marca d'água transparente - Dicas -Edição de foto
- Gimp fundo transparente - Dicas -Gimp
Assine nossa newsletter!
