Introdução:
Transparência é um efeito largamente empregado em documentos Web e que quando usada de maneira racional pode trazer um grande apelo visual.
Em sua forma mais comum a transparência é aplicada em imagens colocadas normalmente sobre textos ou em formas com preenchimento em cores sólidas colocadas sobre conteúdos.

Solução com uso de PNG transparente:
PNG foi inventado pelo W3C e é livre, ou seja, trata-se de um código aberto e não proprietário e atualmente é o único formato gráfico para a Web que suporta transparência. Todos os modernos editores gráficos, tais como o PhotoShop e o Fireworks são capazes de gerar imagens PNG com o canal alpha, ou seja imagens transparentes.

Assim, este é o formato web standard para transparência. Lamentavelmente o suporte oferecido pelos navegadores atuais ainda não é completo para este formato. A primeira versão do Internet Explorer a suportar PNG transparente é o IE7. Mas, como a quantidade de usuários com IE6 ainda é muito grande nos tempos atuais, nós desenvolvedores não podemos usar PNG transparente sem lançar mão de "hacks" para servir o Internet Explorer.

Para que você veja uma PNG transparente em ação, desenvolvi uma página de demonstração de imagens PNG transparentes.

Na página que você acabou de visualizar a imagem de um carro amarelo foi posicionada sobre uma DIV contendo um texto. O IE6 e anteriores simplemente ignoram a imagem e tudo se passa como se ela não estivesse ali. Contudo se você colocar o ponteiro do mouse sobre o local onde a imagem deveria estar aparece um tool-tip com o texto contido no atributo ALT do elemento IMG.

PNG transparente para IE5.5 e IE6:
Existem vários "hacks" capazes de forçar os IE5.5 e IE6 a mostrar imagens PNG transparentes. Na verdade são artíficios que simulam a transparência tal como elas são em navegadores standards e se utilizam da expressão AlphaImageLoader, inventada pela Microsoft. Trata-se de uma propriedade não standard que não passa em validação CSS e que somente os IE entendem.
A criação de um arquivo .htc e a declaração da propriedade behavior para a imagem é um destes "hacks". Não vou detalhar esta solução, mas se você estiver interessado consulte uma matéria (em inglês) sobre o assunto, contendo todos os arquivos necessários disponíveis para download e também uma demonstração da técnica.

Solução com uso de uma imagem alternativa:
Esta solução consiste em servir a imagem PNG transparente para navegadores standards e alternativamente servir a mesma imagem em arquivo, normalmente GIF ou JPG, para o IE aplicando a propriedade CSS FILTER nesta imagem. A diferença é que agora não precisamos acresentar scripts ou behavior, uma vez que FILTER não será aplicado em PNG transparente.

A seguir a parte relevante do código para esta solução:

Código:

HTML
...
<img src="carro-amarelo.png" alt="" class="ca" />
<!--[if lt IE 7]>
<img src="carro-amarelo.gif" alt="" class="ca-ie" />
<![endif]-->
...

CSS
...
img.ca-ie {filter: alpha(opacity=65);}
...

Observe que as imagens foram servidas inline no código HTML (com uso da tag IMG) e eu usei comentários condicionais para servir a imagem aos IE. O não uso de comentários condicionais faria com que a imagem PNG fosse 'coberta' pela imagem GIF. A consequência disto é que em navegadores standards seria renderizada a imagem GIF sem transparência sobre a PNG e o efeito não seria visto.

Para que você veja esta solução em ação, desenvolvi uma página de demonstração com imagem alternativa para o IE.

Solução sem uso de PNG transparente:

Você pode obter o efeito de transparência usando uma única imagem GIF ou JPG ou outro formato que não PNG transparente, para todos os navegadores.
Esta solução é a mais simples e usa menos código e imagens, contudo lança mão de declarações de transparência específicas para determinados navegadores (códigos proprietários e que não são validados).
A sintaxe e descrição de cada um destas declarações é conforme a seguir:

opacity: 0.65 - Previsto nas CSS3 já é suportado atualmente pelo Firefox 2 e pelo Ópera 9, o valor da opacidade varia de 0 a 1;
-moz-opacity: 0.65 - Declaração proprietária para servir navegadores Mozilla, o valor da opacidade varia de 0 a 1;
filter: alpha(opacity=65) - Declaração proprietária para servir navegadores IE o valor da opacidade varia de 0 a 100 .
A seguir a parte relevante do código para esta solução:

Código:

HTML
...
<img src="carro-amarelo.gif" alt="" class="ca" />
...
CSS
...
img.ca {
   opacity:0.65;
   -moz-opacity: 0.65;
   filter: alpha(opacity=65);
   }
...

Para que você veja esta solução em ação, desenvolvi uma página de demonstração com uso de uma imagem e declarações proprietárias.

Conclusões:

Muitas são as técnicas de se obter o efeito transparência com uso de CSS;
Atualmente, por falta de suporte dos navegadores, todas as técnicas requerem "hacks" ou artifícios adicionais para funcionar;
Não há uma técnica possível de ser validada quando exposta integralmente ao parser do validador do W3C;
Cabe unicamente a você, em função das particularidades do projeto decidir pelo uso ou não de uma destas técnicas;
Nota: É possível aplicar estas técnicas colocando as imagens como background de um elemento HTML (por exemplo: uma DIV) e não usando imagens inline no código HTML como usei nesta matéria.
A título de exercício, deixo por conta de vocês, esta opção.

Fonte: Maujor