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