Mudança alfa para um foco de imagem em padrão CSS2?

Question

eu estou tentando adicionar alfa efeito para a minha imagem. a imagem está no canto forma rectangular arredondada. Eu sei que há atributos para alterar o alfa no CSS3, mas eu estou tentando ser compatível com o padrão W3C, que ainda é CSS2.

Desculpe eu não expor minha pergunta corretamente ealier. eu estava tentando mudar o alfa quando eu passar o mouse sobre a imagem usando CSS2. eu estou pensando em usar o "background-image" para 100% alfa, e usar a tag img para o alpha de 50%. Existe alguma maneira melhor de fazer isso?

Answer 1

Se a imagem é um PNG , você pode incluir alfa diretamente na imagem. Claro que isso exigiria a href="http://www.twinhelix.com/css/iepngfix/" rel="nofollow noreferrer"> roteiro Fix

Caso contrário, você pode usar CSS para definir a transparência.

Edit:. Atualizado para funcionar apenas em foco, nota que este não vai funcionar no IE6

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Answer 2

A forma típica de um desenvolvedor web implementa os efeitos transparentes está usando um arquivo PNG parcialmente transparente como um fundo.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

Usando o png funcionará como seria de esperar, no entanto opacidade não funciona como esperado:

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

Isso fará com que DIV 50% transparente, incluindo todos os seus filhos, texto e tudo. Você realmente vai precisar de brincar com as configurações de opacidade para ter certeza de obter resultados como seria de esperar.

Answer 3

Uma correção ainda mais simples, se você pode ficar uma experiência de usuário um pouco pior para o IE6, é usar uma imagem alfa-transparente para todos os navegadores modernos, e envie uma imagem sem transparência (ou apenas uma cor) para IE6. Parece um pouco pior para aqueles poucos usuários, mas é muito menos código para manter.