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





7 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 */
transparente pero el

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



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



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.




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

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

Aclamaciones




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



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



Related