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


110

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?

Respuestas:


73

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.


2
Sip. rgba()los valores de color no son compatibles con IE 8.
Paul D. Waite

11
Para evitar un problema potencial, use cualquier tamaño que no sea 1x1: stackoverflow.com/questions/7764751/…
thirtydot

43
Sería aceptable en 2003, pero no en 2013. Utilice -ms-filter para un soporte algo simulado en el IE antiguo o, mejor aún, ignórelo. Las personas que usan IE8 merecen ser castigadas por no ver el radio del borde, el fondo transparente, etc.
Evgeny

21
@EugeneXa Trabajo para mis clientes, no al revés. Si usan IE8, lo apoyo. Castigar a los clientes potenciales no es un buen negocio.
Eli

14
@EugeneXa Está más cerca del 10% en mis sitios, y suelen ser buenos clientes. No hay una única respuesta correcta aquí. Haga los cálculos y descubra qué funciona para usted. ¡Incluso el 6% podría ser enorme para algunos sitios! Ningún usuario merece ser castigado. Creo que te arrepentirás de esa actitud.
Eli

241

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

2
esto funciona de maravilla, excepto que desafortunadamente parece dejar de funcionar si el elemento se oculta dinámicamente y se vuelve a mostrar usando jQuery ...
jackocnr

El filtro rgba IE fue muy útil y pude
solucionarlo

¿Cuál es la opacidad de 0,6 para el filtro?
Si8

10
Los códigos hexadecimales para la transparencia (el primer par) se pueden encontrar aquí: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
¡Hay una calculadora para esos valores hexadecimales personalizados de IE!
nietonfir

14

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;
}

Y recuerde usar siempre el color hexadecimal RGBA en el filtro: eq # 004F80 es # ed004F80
user956584

9

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');
});

24
El alfa de fondo no es lo mismo que la opacidad (tampoco hace que el elemento hijo sea transparente).
Alexey Smolyakov

1
Esto no responde a la pregunta ni se aplica CSS a través de jQuery (o JavaScript en general) como una solución de navegador cruzado.
mystrdat

7

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!


2
¿Cómo funciona esto? ¿La URL rgba.php solo la solicitan los navegadores que no la admiten rgba? ¿O siempre lo solicitan todos los usuarios y simplemente no se muestra?
Darren Cook

Mi esperanza es que el navegador vea automáticamente el segundo fondo e ignore el primero, antes de que intente realizar una solicitud. Pero, como mucho, esa es una suposición informada.
Girar

7

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);
 }

5

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.


4
jaja, caso típico de un navegador que no actúa como el resto, y cada versión de ese navegador no actúa como otras versiones del mismo navegador ... solo Microsoft pudo lograr esto con tanto éxito ...
ClarkeyBoy

3
@Paul D. Waite: Hay muchas, muchas funciones que ofrecen los navegadores además de cómo procesan el contenido. Desviarse de la especificación no es (o no debería ser) una característica.
Bobby Jack

@Paul D. Waite: Ok, veo su punto, pero lo que quiero decir es que las diferentes versiones de IE actúan de manera tan diferente que me encuentro teniendo que crear una hoja de estilo diferente para cada versión ... Tengo diferentes hojas de estilo para IE6, 7 y 8 ... sin embargo, solo tengo una hoja de estilo para todo FF / Chrome / Opera / Safari. @Bobby Jack: Secundado ...
ClarkeyBoy

@Bobby: Claro, pero IE 8 no se desvía de los estándares más que IE 7 o IE 6, ¿verdad?
Paul D. Waite

@ClarkeyBoy: seguro. Sin embargo, encuentro que mi hoja de estilo IE 8 es mucho más simple que mi hoja de estilo IE 6. IE es el más extraño de los navegadores, pero poco a poco se está alineando con los demás. Firefox no lo admitió rgba()hasta la versión 3, y Opera no lo admitió hasta la versión 10.
Paul D. Waite


2

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


Siempre he estado buscando ese convertidor ARGB a RGBA, ¡Gracias! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

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

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

Salud


1

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

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

0

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);

0

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;
}

0

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;
}

0

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/
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.