5 de outubro de 2009

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

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.


exemplotransparencia.jpg


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.

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).

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

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

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

8 comentários:

  1. Olá Danillo, bastante detalhado o post, como sempre. Tava tentando resolver o problema da transparência no explorer de uns botões sociais que instalei agora no meu blog e sua dica funcionou. Mas se o botão possuir um corte irregular ou um pano de fundo, ele exibe exibe os detalhes, estragando a imagem, maldito IECA! Hehehe! Resolvi deixar como estava antes.

    Grande feriadão pra ti velhinho!

    CHINFRAS e TALS

    ResponderExcluir
  2. Que bom que o post serviu pra você David ! Abraço !

    ResponderExcluir
  3. Olá, e no caso de deixar uma div transparente !?

    eu usei:
    filter:Alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;

    para exibir um tipo de legenda em cima da foto, só que no IE não funciona.

    obrigado.

    ResponderExcluir
  4. otima dica
    é mais facil do que imaginava
    vou aplicar no meu blog abraçoo


    http://explicacaodanet.blogspot.com/

    ResponderExcluir
  5. oi, sabe me dizer se essa transparencia pode ter cor? tipo, colocar uma cor no icone qnd ele for selecionado em vez de branco, pq ele so clarea a imagem. mas naum queria usar 2 imagens, queria apenas uma modificaçao nesse efeito. Zois Gantzias www.guiaamoroso.com guiaamoroso@hotmail.com

    ResponderExcluir
  6. @Zois Gantzias: Ah sim, entendi sua pergunta,por enquanto essas propriedades "filter" e "opacity" apenas modificam a opacidade da imagem original mesmo, não dá pra colocar uma cor específica na transparência, se quizer que a cor mude você deve modificar a imagem, se você encotrar um meio de fazer isso pode me enviar ;D
    Espero que tenha respondido sua pergunta.

    ResponderExcluir
  7. Vlws pela resposta.
    Sei criar outros efeitos hover com a mudança de imagem
    mas naum é muito pratico pois o codigo fica enorme.
    Reparei q o hover aparentemente muda com o fundo do seu layout

    ResponderExcluir
  8. Olá. Gostei muito do post. Mas tenho outra questão: tenho duas imagens normais e gostaria de por uma opaca por cima. Á medida de uma percentagem, ia mostrando a imagem com toda a cor de baixo para cima. É possível?

    Cumprimentos

    ResponderExcluir