La opacidad de fondo CSS con rgba no funciona en IE 8

Estoy usando este CSS para la opacidad de fondo de un <div>:

background: rgba(255, 255, 255, 0.3);

Funciona bien en Firefox, pero no en IE 8. ¿Cómo hago para que funcione?

Cree un png que sea más grande que 1x1 píxel (gracias treinta y dos) y que coincida con la transparencia de su fondo.

EDITAR: para recurrir a la compatibilidad con IE6 +, puede especificar bkgd chunk para png, este es un color que reemplazará la transparencia alfa verdadera si no es compatible. Puedes arreglarlo con gimp eg.

para simular el fondo RGBA y HSLA en IE, puede usar un filtro de degradado, con el mismo color inicial y final (el canal alfa es el primer par en el valor de HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Creo que este es el mejor porque en esta página tiene una herramienta para ayudarte a generar un fondo alfa transparente:

" CSS (rgba) de fondo transparente alfa de varios navegadores " ^{_{(* ahora vinculado a archive.org)}}

#div {
    background:rgb(255,0,0);
    background: transparent\9;
    background:rgba(255,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
}

la imagen png transparente no funcionará en IE 6-, las alternativas son:

con CSS:

.transparent {

    /* works for IE 5+. */
    filter:alpha(opacity=30); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.3; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.3; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.3; 
}

o simplemente hazlo con jQuery:

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});

Aunque fue tarde, tuve que usar eso hoy y encontré un script php muy útil aquí que le permitirá crear dinámicamente un archivo png, muy parecido a la forma en que funciona rgba.

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

El script se puede descargar aquí: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Sé que puede que no sea la solución perfecta para todos, pero vale la pena considerarla en algunos casos, ya que ahorra mucho tiempo y funciona a la perfección. ¡Espero que ayude a alguien!

En su mayoría, todos los navegadores admiten código RGBa en CSS, pero solo IE8 y los niveles inferiores no admiten el código RGBa css. Para esto aquí hay una solución. Para la solución, debe seguir este código y es mejor seguir su secuencia, de lo contrario no obtendrá la salida perfecta como desea. Este código es usado por mí y es casi perfecto. haz un comentario si es perfecto.

.class
 {
        /* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.6);
        /* IE 8 suppoerted */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
 }

Usas css para cambiar la opacidad. Para hacer frente a IE, necesitaría algo como:

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

Pero el único problema con esto es que significa que cualquier cosa dentro del contenedor también tendrá una opacidad de 0.3. Por lo tanto, tendrá que cambiar su HTML para tener otro contenedor, no dentro del transparente, que contenga su contenido.

De lo contrario, la técnica png funcionaría. Excepto que necesitaría una solución para IE6, que en sí mismo podría causar problemas.

Llego tarde a la fiesta, pero para cualquier persona que encuentre esto, este artículo es muy útil: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Utiliza el filtro de degradado para mostrar colores sólidos pero transparentes.

Para usar el rgbafondo en IE hay una alternativa.

Tenemos que usar la propiedad de filtro. que usaARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

esto es un respaldo para rgba(255, 255, 255, 0.2)

Cambia #33ffffffsegún el tuyo.

Cómo calcular ARGBparaRGBA

esto funcionó para mí para resolver el problema en IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

Salud

Esta solución realmente funciona, pruébala. Probado en IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

Es muy simple, primero tienes que dar el fondo como rgb porque Internet Explorer 8 admitirá rgb en lugar de rgba y luego tienes que dar opacidad como filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

Esta es una solución de transparencia para la mayoría de los navegadores, incluido IE x

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

La mejor solución que encontré hasta ahora es la propuesta por David J Marland en su blog , para soportar la opacidad en navegadores antiguos (IE 6+):

.alpha30{
    background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */ 
    background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
    zoom: 1; /* needed for IE 6-8 */
}

/* 
 * CSS3 selector (not supported by IE 6 to IE 8),
 * to avoid IE more recent versions to apply opacity twice
 * (once with rgba and once with filter)
 */
.alpha30:nth-child(n) {
    filter: none;
}

Después de buscar mucho, encontré la siguiente solución que funciona en mis casos:

.opacity_30{
    background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */ 
    background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
    zoom: 1; /* Hack needed for IE 6-8 */
}

/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
    filter: none;
}

* Importante: Para calcular ARGB (para IE) de RGBA, podemos usar herramientas en línea:

1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/