texto - rgba css
Opacidad de fondo de CSS con rgba que no funciona en IE 8 (15)
Estoy usando este CSS para la opacidad de fondo de un <div> :
background: rgba(255, 255, 255, 0.3);
Está funcionando bien en Firefox, pero no en IE 8. ¿Cómo lo hago funcionar?
Aunque tarde, tuve que usar eso hoy y encontré un script php muy útil here que te permitirá crear dinámicamente un archivo png, muy parecido a como 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 no ser la solución perfecta para todos, pero vale la pena considerarlo en algunos casos, ya que ahorra mucho tiempo y funciona sin problemas. Espero que ayude a alguien!
Crea un png que sea mayor que 1x1 píxel (gracias a thirtydot), y que coincida con la transparencia de tu fondo.
EDITAR: para recurrir a la compatibilidad con IE6 +, puede especificar el fragmento bkgd para el png, este es un color que reemplazará la verdadera transparencia alfa si no es compatible. Puedes arreglarlo con gimp ej.
Creo que esto es lo mejor porque en esta página tiene una herramienta para ayudarlo a generar un fondo alfa-transparente:
http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-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;
}
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 IEs) desde RGBA, podemos usar herramientas en línea:
En su mayoría, todos los navegadores admiten código RGBa en CSS, pero solo IE8 y el nivel inferior no son compatibles con 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 que desee. Este código es utilizado por mí y es en su mayoría perfecto. hacer 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);
}
Es muy simple que tenga que dar primero, tiene que dar un fondo como rgb porque Internet Explorer 8 soportará rgb en lugar de rgba y luego tendrá 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;
}
Esta solución realmente funciona, pruébalo. Probado en IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
La mejor solución que he encontrado hasta ahora es la propuesta por David J Marland en su blog , para admitir la opacidad 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;
}
Llego tarde a la fiesta, pero para cualquier otra persona que lo encuentre, este artículo es muy útil: calculator
Utiliza el filtro de gradiente para mostrar un color sólido pero transparente.
Para usar el fondo de rgba en IE hay una alternativa.
Tenemos que usar la propiedad de filtro. que usa 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 una alternativa para rgba(255, 255, 255, 0.2)
Cambia #33ffffff acuerdo al tuyo.
Cómo calcular ARGB para RGBA
Usas css para cambiar la opacidad. Para lidiar con IE necesitarías 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.
esto funcionó para mí para resolver el problema en IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Aclamaciones
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'');
});
para simular el fondo RGBA y HSLA en IE, puede usar un filtro de gradiente, con el mismo color de inicio 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 */