Cambiar alfa para un vuelo estacionario imagen en el estándar CSS2?

Question

Estoy tratando de añadir efectos alfa para mi imagen. la imagen está en la esquina de forma rectangular redondeada. Sé que hay atributos para cambiar el alfa en CSS3, pero yo estoy tratando de ser compatible con el estándar W3C, que todavía está CSS2.

Lo siento, no exponer mi pregunta correctamente ealier. yo estaba tratando de cambiar el alfa cuando se ciernen sobre la imagen, utilizando CSS2. Estoy pensando en usar la "imagen de fondo" para el 100% de alfa, y el uso de la etiqueta img para el 50% de alfa. ¿hay alguna forma mejor de hacer esto?

Answer 1

Si la imagen es un PNG , puede incluir alfa directamente en la imagen. Por supuesto, esto requeriría que el PNG Fix guión para IE6.

De lo contrario, puede utilizar CSS para establecer la transparencia.

Editar: Se ha actualizado para trabajar solamente en vuelo estacionario, tenga en cuenta que esto no funcionará en 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

La forma típica de un desarrollador web implementa los efectos transparentes está utilizando un archivo PNG parcialmente transparente como fondo.

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

Uso del png funcionará como era de esperar, sin embargo, la opacidad no funciona como se espera:

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

Esto hará que DIV 50% transparente, incluyendo todos sus hijos, texto y todo. Que realmente se necesita para jugar con los ajustes de opacidad para asegurarse de obtener resultados como era de esperar.

Answer 3

Una solución aún más simple, si puedes soportar al usuario una experiencia un poco peor para IE6, es utilizar una imagen alfa transparente para todos los navegadores modernos, y enviar una imagen sin transparencia (o simplemente de un solo color) a IE6. Se ve un poco peor para esos pocos usuarios, pero es mucho menos código que mantener.