Cambiare alfa per un hover un'immagine nello standard CSS2?

Question

sto cercando di aggiungere effetti alpha per la mia immagine. l'immagine è di forma rettangolare angolo arrotondato. So che c'è attributi per cambiare l'alfa in CSS3, ma sto cercando di essere compatibile con lo standard W3C, che è ancora CSS2.

Mi dispiace non ha precisato in modo corretto le revisioni precedenti la mia domanda. stavo cercando di cambiare l'alfa quando ho il mouse sopra l'immagine utilizzando CSS2. Sto pensando di utilizzare il "background-image" per il 100% alfa, e utilizzare il tag img per l'alfa del 50%. c'è un modo migliore per fare questo?

Answer 1

Se l'immagine è un PNG , è possibile includere alpha direttamente nell'immagine. Naturalmente questo richiederebbe l' PNG Fix copione per IE6.

In caso contrario, è possibile utilizzare i CSS per impostare la trasparenza.

Modifica: Aggiornato a lavorare solo al passaggio del mouse, si noti che questo non funzionerà in 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

Il modo tipico uno sviluppatore web implementa gli effetti trasparenti utilizza un file PNG parzialmente trasparente come sfondo.

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

Uso della png funzionerà come ci si aspetterebbe, ma l'opacità non funziona come previsto:

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 */
}

In questo modo sarà DIV 50% trasparente, tra tutti i suoi figli, il testo e tutti. Sarà davvero bisogno di giocare con le impostazioni di opacità per essere sicuri di ottenere risultati come ci si aspetterebbe.

Answer 3

Una soluzione ancora più semplice, se si può stare un'esperienza utente leggermente peggiore per IE6, è quello di utilizzare un'immagine alfa-trasparente per tutti i browser moderni, e inviare un'immagine senza trasparenza (o solo un colore) per IE6. Sembra un po 'peggio per quei pochi utenti, ma è molto meno codice per mantenere.