internet-explorer-8 el - Opacidad de fondo de CSS con rgba que no funciona en IE 8




colores opaco (13)

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?


Answers

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.


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

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

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.


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


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

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

Aclamaciones


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

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!


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.


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:

  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/

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

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

Si utiliza formularios web de ASP.NET , no necesita preocuparse por los DIV y otros elementos o tamaños fijos. Podemos alinear el texto <asp:CheckBoxList> configurando float:left para el tipo de entrada CheckboxList en CSS.

Por favor revise el siguiente código de ejemplo:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Código .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>




css internet-explorer-8 rgba