CSS Tutorial - Imagem transparente com CSS (mudando a opacidade).

[Yuri Cordeiro]

Você não precisar criar nenhuma imagem em png para criar uma transparência, basta usar as propriedades filter e a opacity em qualquer JPEG ou GIF no seu site.

Bom, vamos começar pela propriedade opacity, ela define a transparêcia da imagem. Alternado o número 0.7 podemos mudar a intensidade da opacidade na imagem, você pode definir um valor de 0.1 a 1.0, menores valores deixam a imagem mais transparente.

Código:

img{
opacity:0.7;
}

Uma coisa muito importante, o opacity é uma das novas propriedades do CSS3, ou seja, não é suportado por todas as versões de browser por isso recomendo usar essa propriedade junto com a propriedade filter.

A propriedade filter tem a mesma função, aterando o número 70 do alpha(opacity=70) podemos mudar a intensidade da opacidade na imagem, você pode definir um valor de 0 a 100, menores valores deixam a imagem mais transparente. Essa propriedade é usada para o Internet Explorer (IE).

Código:

img{ 
filter:alpha(opacity=70);
}

Finalizando, use sempre os dois juntos para evitar o problema da transparência ser mal suportada por algum browser.

Código:

img{
opacity:0.7;
filter:alpha(opacity=70);
}

Bom pessoal, é isso. Qualquer dúvida postem aqui que eu respondo.
Abraços.