Imagem com CSS Opacity

Opacidade na imagem CSS é um valor que torna a imagem "transparente", dependendo do valor que acrescentam, é algo como o que fazemos com o nosso photoshop. Com este guia, você aprenderá a usar esse valor, tanto no Internet Explorer e Mozilla Firefox.

Os resultados dos testes

Ver demonstração

Etapa 1

Primeiro de tudo você deve ter a imagem que você deseja adicionar opacidade, geralmente inseri-lo do seu Dreamweaver ou Front Page e adicionar a classe que você deseja, por exemplo, algo parecido com isto:

1	"http://tuweb.com/imagen.png" alt = "imagen" class = "imagen-opacidad" / > <img "http://tuweb.com/imagen.png" Alt = src = class = "image" "image-opacity" />

Etapa 2

Ir para o estilo de sua página e adicionar a propriedade de opacidade para sua classe da seguinte forma:

  1
 2
 3

  . Opacidade da imagem (
 opacidade: 0,7;
 )

Este número faz é adicionar uma opacidade de 70%, isto é, se você colocá-lo em um valor de 0,5, a opacidade é de 50%. Com este seu estilo de opacidade será visto em Mozilla Firefox, para também ser visto no Internet Explorer, usamos comentários condicionais .

Etapa 3

Criar uma nova folha de estilo CSS chamada Internet Explorer (internet-explorer.css) e adicione a seguinte linha:

  1
 2
 3

 filter : alpha ( opacity = 70 ) ; } .-Opacidade da imagem (filter: alpha (opacity = 70);)

O número 70 diz-nos que o objeto terá uma opacidade de 70%.

Etapa 4

Uma vez que você salvar a folha de estilo novo, adicione o seguinte comentário condicional para o arquivo HTML onde a sua imagem.

  1
 2
 3

  <!--[ If IE 7]>
 href = "internet-explorer.css" <link rel="stylesheet" type="text/css" />
 <! [Endif] ->

Isso mesmo, agora você tem a sua imagem com opacidade no Internet Explorer e Mozilla Firefox.

Extra

Este efeito é muito bom para fazer uma imagem se torna mais clara quando se passa o mouse sobre ele, por isso, devemos adicionar a propriedade ": hover" para a nossa classe, tanto o firefox css css como o Internet Explorer.

CSS FIREFOX:

  . Opacidade da imagem (
 opacidade: 0.8;)
 { . Opacidade da imagem: hover (
 opacidade: 0,5;
 )

CSS INTERNET EXPLORER:

 filter : alpha ( opacity = 50 ) ; } .imagen-opacidad :hover { filter : alpha ( opacity = 80 ) ; } .-Opacidade da imagem (filter: alpha (opacity = 50);). Opacidade da imagem: hover (filter: alpha (opacity = 80);)

Ver demonstração

Michael é o criador e editor de skyandstars.net que publica guias e tutoriais para WordPress, CuteNews, PHP, HTML e muito mais. É um estudante universitário atual.

Mijael166

Talvez uma destas entradas podem lhe interessar

6 Responses to "Imagem de opacidade com CSS"

jorge
22 de junho de 2009
Resposta

não funciona no Internet Exporer
Mijael166
26 de junho de 2009
Resposta

Se ele funciona .... Qual versão do Internet Explorer que você está usando? .. Works para 7 e até ..
maisa
03 de julho de 2009
Resposta

muito fácil!, eu pensei que tinha mais ciência xD qe
maisa
03 de julho de 2009
Resposta

Hey Michael, eu já vi alguns sites que têm uma imagem a preto e branco e ao passar sobre ela gira a cor, você sabe como fazer isso?
Mijael166
03 de julho de 2009
Resposta

sim ... isso é javascript ... teria que encontrar um código para fazer isso .... com CSS não é possível: (
Maddie
08 de agosto de 2009
Resposta

Eu acho que é difícil de fazer, não tenho ciência e_e xD