Criar um DIV com transparência

O que é a tag DIV no HTML
Como tornar o DIV e seu conteúdo transparentes
Como manter o conteúdo visível em uma DIV transparente
- Como colocar em prática a função rgba()

O que é a tag DIV no HTML

Com a tag DIV você será capaz, trabalhando com o HTML, de criar um bloco, uma divisão colando dentro deste bloco uma imagem, links, textos ou outra coisa qualquer. Se você quiser tornar um DIV transparente, basta utilizar técnicas de CSS; veja quais são elas.

Como tornar o DIV e seu conteúdo transparentes

Se você quer tornar um DIV transparente nada de mais simples, basta utilizar algumas técnicas de CSS; veja aqui como fazer. Na verdade o próprio DIV ficará transparente, assim como o conjunto do conteúdo, tal como as imagens ou o texto. Digite:

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

A propriedade opacity é suportada pelo Firefox 3 e superores, Chrome 2 e superiores, Safari a partir da versão (não testada no 3) no Opera a partir do 10. A propriedade filter:alpha(opacity=50) permite que o Internet Explorer 8 (não o 7) e o Opera 9.x a tornem transparente.

Como manter o conteúdo visível em uma DIV transparente

Você pode utilizar a propriedade CSS chamada rgba para colocar uma cor em CSS. Utilize a propriedade rgb(), logo a função rgba() será utilizada. Observe que foi adiciona da letra a, o canal alfa, ou seja a transparência. Aqui, será o vermelho:

<div style="background-color: rgba(255, 0, 0, 0.5)"> ....... </div>

Esta propriedade não é reconhecida pelo Internet Explorer nem pelo Opera 9.x, porém, funciona no Opera 10 e superores.

Como colocar em prática a função rgba()

Com uma tag DIV que contenha texto e imagens, coloque uma DIV aberta e feche-a imediatamente ainda vazia. Será esta tag que permitirá que o fundo seja transparente, sem afetar o restante do texto. O DIV vazio será esticado até a borda do contentor DIV, mas por trás dela. Veja o 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 a primeira DIV tem um posicionamento relativo, coloca-se 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 cubra a primeira DIV, e um z-index de -1, para colocar no primeiro.

Foto: © Yuriy Vlasenko - Shutterstock.com

Veja também

Artigo original publicado por jad05. Tradução feita por pintuda. Última modificação: 9 de novembro de 2017 às 11:35 por Pedro.CCM.

Webmaster: adaptar um site a todas as resoluções

Os pesos CSS