CSS opacidad de fondo con RGBA no funciona en IE 8
https://stackoverflow.com/questions/3975688
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando este CSS para el fondo opacidad de una <div>:
background: rgba(255, 255, 255, 0.3);
Está funcionando bien en Firefox, pero no en IE 8. ¿Cómo hacer que funcione?
Solución
Crear un png que es más grande que 1x1 píxeles (gracias thirtydot), y que coincide con la transparencia de sus antecedentes.
EDIT: para caer de nuevo para el apoyo IE6 +, puede especificar trozo bkgd para el png, este es un color que sustituirá a la verdadera transparencia alfa si no es compatible. Se puede arreglar con gimp por ejemplo.
Otros consejos
para simular RGBA y HSLA fondo en IE, se puede utilizar un filtro de gradiente, con el mismo inicio y final de color (alfa canal 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 de esta página tiene una herramienta para ayudarle a generar alfa-transparente de fondo:
http://hammerspace.co.uk/ 2011/10 / cross-browser-alfa-transparente-fondo-css
#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 sólo lo hacen con jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Aunque tarde, tuvo que usar hoy y se encontró que un script PHP muy útil aquí que le permitirá crear dinámicamente un archivo PNG, al igual que las obras modo 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 no ser la solución perfecta para todo el mundo, pero vale la pena considerar en algunos casos, ya que ahorra mucho tiempo y funciona perfectamente. Esperanza de que ayude a alguien!
No son en su mayoría todo el código de soporte de los navegadores RGBA en CSS, pero sólo IE8 y por debajo del nivel no soporta código CSS RGBA. Para este aquí es solución. Para la solución debe seguir este código y es mejor ir con su secuencia de lo contrario no obtendrá salida perfecta como desee. Este código es utilizado por mí y es sobre todo perfecto. hacer comentarios 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);
}
Se utiliza CSS para cambiar la opacidad. Para hacer frente a IE se necesitaría algo como:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
Sin embargo, el único problema con esto es que significa algo en el interior del recipiente también será 0,3 opacidad. Así que tendrá que cambiar el código HTML para tener otro contenedor, no dentro de la transparencia, que tiene su contenido.
De lo contrario la técnica png, funcionaría. Excepto que había necesidad de una solución para IE6, que en sí mismo podría causar problemas.
llego tarde a la fiesta, pero para cualquier otra persona que encuentra este - este artículo es muy útil: http://kilianvalkhof.com/2010/css- XHTML / cómo-a-uso-RGBA-in-iE /
Se utiliza el filtro de gradiente para visualizar el color sólido, pero transparente.
Para el uso del fondo rgba en IE hay un repliegue.
Tenemos que usar la propiedad de filtro. que los usos ARGB
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 fallback para rgba(255, 255, 255, 0.2)
Cambiar #33ffffff de acuerdo a la suya.
Cómo calcular ARGB para RGBA
Esto funcionó para mí para resolver el problema en IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Saludos
Esta solución funciona de verdad, probarlo. Probado de IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
Es muy simplemente hay que darle primero que tiene que dar backgound como RGB porque Internet Explorer 8 apoyará RGB RGBA lugar y luego U tiene que dar la opacidad como filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
Esta solución una transparencia para la mayoría de los navegadores, incluyendo 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 el propuesto por David J Marland en su Registrarse , a la opacidad de soporte en los 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, me encontré con la siguiente solución, que está trabajando 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 (IES) de RGBA, podemos utilizar las herramientas en línea:
