Transparência é um efeito que, infelizmente, não tem obtido muito uso
na web durante a sua história. Uma das maiores razões para isso é a
falta de apoio para PNGs com canais alfa no IE6. Isso está começando a
mudar com IE 7 e Firefox, ganhando mais e mais terreno nos sistemas
Windows.

A maioria dos desenvolvedores web já deve estar ciente de que é
possível utilizar PNGs com canais alfa, mas isso contempla vários
problemas e não funciona muito bem quando você adiciona conteúdo em cima
deles.

Existe uma maneira de tornar os conteúdos transparentes, usando a tag
opacity e um código proprietário de opacidade para o Internet Explorer.
O problema é como esta propriedade CSS se baseia, onde todos os filhos
herdam a transparência também, que muitas vezes não é o efeito desejado.

Sabendo tudo isto, como vamos criar colunas transparentes que possam
trabalhar em todos os navegadores? E se pudéssemos usar a propriedade de
opacidade, mas ainda tem o conteúdo opaco?

Isso é possível utilizando algumas técnicas de posicionamento em CSS.
O que vamos fazer é ter um elemento pai que contenha 2 filhos. Um fundo
transparente que ocupa toda a largura e altura do pai, e um filho que
contenha o conteúdo. Dessa forma podemos ter um fundo transparente,
enquanto o conteúdo permanece opaco.

Vamos ao trabalho

A base da marcação que iremos utilizar é a seguinte:

<div id="column-1" class="container">
<div class="overlay"></div>
<div class="content">
<h2>Content</h2>
</div>6.</div>

Em primeiro lugar queremos definir o elemento container com position:
relative; e float: left; isso permite-nos utilizar posicionamento
absoluto e faz com que o elemento pai possa conter vários filhos.

#column-1 {
position: relative;
float: left;
width: 500px; /* lembre-se de definir 
uma largura */
}

Agora vamos cuidar da transparência.

.overlay{
  position: absolute;
  top: 0; /* Necessário definir a posição */
  bottom: 0;  /* irá cobrir o elemento pai */
  left: 0;
  width: 100%;
  background: #000;
  opacity: 0.65;
  -moz-opacity: 0.65; /* Browsers baseados no motor Gecko */
  filter:alpha(opacity=65); /* Para IE6 e 7 */
}

Ok. Agora vamos aplicar algum estilo ao conteúdo. É importante
definir alguma largura fixa.

#column-1 .content {
width: 460px;
padding: 20px;
}

Ok, quase tudo já foi feito. Como você deve ter notado (se você está
me seguindo), o texto é colocado sob a cobertura transparente. Para
corrigir isso, devemos definir o conteúdo com position: relative;

.content {
position: relative;
}

Ok, agora ele funciona em todos os browsers, exceto o IE6. Vamos
corrigir isso. Digite o seguinte expressão CSS:

/* Faça o uso do hack * html para que só o IE6 entenda essa regra */
* html #column-1 .overlay {
  height: expression(document.getElementById("column-1").offsetHeight);
}

Se você planeja utilizá-lo em um site ativo, você pode utilizar conditional comments ao
invés do kack estrela. Mas para este exemplo isso será suficiente.

Desvantagem

É também digno de nota que não vai funcionar no IE6 se o JavaScript
estiver desativado. Outra desvantagem é que cada coluna tem seu próprio
ID e sua própria regra CSS para IE6. Não podemos viver com isso.

Conclusão

E aí está! Aqui você pode ver um exemplo funcional.
Colunas transparentes Cross Browser.

*

Esse artigo é uma tradução do original do blog: Bits &
Pixels.