L'opacité de l'arrière-plan CSS avec rgba ne fonctionne pas dans IE 8

J'utilise ce CSS pour l'opacité d'arrière-plan d'un <div>:

background: rgba(255, 255, 255, 0.3);

Cela fonctionne bien dans Firefox, mais pas dans IE 8. Comment puis-je le faire fonctionner?

Créez un png qui est plus grand que 1x1 pixel (merci thirtydot), et qui correspond à la transparence de votre arrière-plan.

EDIT: pour revenir au support IE6 +, vous pouvez spécifier bkgd chunk pour le png, c'est une couleur qui remplacera la vraie transparence alpha si elle n'est pas supportée. Vous pouvez le réparer avec gimp par exemple.

pour simuler un arrière-plan RGBA et HSLA dans IE, vous pouvez utiliser un filtre dégradé, avec la même couleur de début et de fin (le canal alpha est la première paire dans la valeur de HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Je pense que c'est le meilleur car sur cette page a un outil pour vous aider à générer un arrière-plan transparent alpha:

" Cross browser alpha transparent background CSS (rgba) " ^{_{(* maintenant lié à archive.org)}}

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

l'image png transparente ne fonctionnera pas dans IE 6-, les alternatives sont:

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

ou faites-le simplement avec jQuery:

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});

Bien tard, je devais utiliser aujourd'hui et a trouvé un script php très utile ici qui vous permettra de créer dynamiquement un fichier .png, tout comme la façon dont fonctionne RGBA.

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

Le script peut être téléchargé ici: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Je sais que ce n'est peut-être pas la solution parfaite pour tout le monde, mais cela vaut la peine d'envisager dans certains cas, car cela fait gagner beaucoup de temps et fonctionne parfaitement. J'espère que cela aide quelqu'un!

La plupart du temps, tous les navigateurs prennent en charge le code RGBa dans CSS, mais seuls IE8 et les niveaux inférieurs ne prennent pas en charge le code css RGBa. Pour ceci, voici la solution. Pour la solution, vous devez suivre ce code et il est préférable de suivre sa séquence, sinon vous n'obtiendrez pas un résultat parfait comme vous le souhaitez. Ce code est utilisé par moi et il est généralement parfait. faire un commentaire si c'est parfait.

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

Vous utilisez css pour modifier l'opacité. Pour faire face à IE, vous avez besoin de quelque chose comme:

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

Mais le seul problème avec cela est que cela signifie que tout ce qui se trouve à l'intérieur du conteneur aura également une opacité de 0,3. Ainsi, vous devrez changer votre HTML pour avoir un autre conteneur, pas à l'intérieur du transparent, qui contient votre contenu.

Sinon, la technique png fonctionnerait. Sauf que vous avez besoin d'un correctif pour IE6, ce qui en soi pourrait causer des problèmes.

Je suis en retard à la fête, mais pour quiconque trouve ceci - cet article est très utile: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Il utilise le filtre dégradé pour afficher une couleur solide mais transparente.

Pour utiliser l' rgbaarrière-plan dans IE, il existe une solution de secours.

Nous devons utiliser la propriété de filtre. qui utiliseARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

c'est une solution de secours pour rgba(255, 255, 255, 0.2)

Changez #33ffffffselon le vôtre.

Comment calculer ARGBpourRGBA

cela a fonctionné pour moi pour résoudre le problème dans IE8:

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

À votre santé

Cette solution fonctionne vraiment, essayez-la. Testé dans IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

C'est très simplement que vous devez d'abord donner le backgound en tant que rgb car Internet Explorer 8 prendra en charge rgb au lieu de rgba et ensuite vous devez donner une opacité comme filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

C'est une solution de transparence pour la plupart des navigateurs, y compris 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 meilleure solution que j'ai trouvée jusqu'à présent est celle proposée par David J Marland dans son blog , pour supporter l'opacité dans les anciens navigateurs (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;
}

Après avoir beaucoup cherché, j'ai trouvé la solution suivante qui fonctionne dans mes cas:

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

* Important: pour calculer l'ARVB (pour les IE) à partir de RGBA, nous pouvons utiliser des outils en ligne:

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/