Opacidad de fondo de CSS con rgba que no funciona en IE 8


6 Answers

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

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?




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



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

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

Aclamaciones




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 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.




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



Related