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


110

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?

Réponses:


73

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.


2
Ouaip. rgba()les valeurs de couleur ne sont pas prises en charge dans IE 8.
Paul D. Waite

11
Pour éviter un problème potentiel, utilisez une taille autre que 1x1: stackoverflow.com/questions/7764751/…
thirtydot

43
Serait acceptable en 2003, mais pas en 2013. Soit utilisez -ms-filter pour un support quelque peu simulé dans l'ancien IE, soit, mieux encore, ignorez-le. Les personnes utilisant IE8- méritent d'être punies en ne voyant pas le rayon de la bordure, le fond transparent, etc.
Evgeny

21
@EugeneXa Je travaille pour mes clients, pas l'inverse. S'ils utilisent IE8, je le soutiens. Punir des clients potentiels n'est pas une bonne affaire.
Eli

14
@EugeneXa C'est plus près de 10% sur mes sites, et ce sont souvent de bons clients. Il n'y a pas de bonne réponse ici. Faites le calcul et déterminez ce qui fonctionne pour vous. Même 6% pourrait être énorme pour certains sites! Aucun utilisateur ne mérite d'être puni. Je pense que vous regretterez cette attitude.
Eli

241

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

2
cela fonctionne un régal, sauf que malheureusement, il semble cesser de fonctionner si l'élément est masqué dynamiquement et ré-affiché en utilisant jQuery ...
jackocnr

Le filtre rgba IE a été très utile et j'ai pu trouver du travail pendant> ie7
codingbbq

Quelle est l'opacité de 0,6 pour le filtre?
Si8

10
Les codes hexadécimaux pour la transparence (la première paire) peuvent être trouvés ici: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
Il existe une calculatrice pour ces valeurs hexadécimales personnalisées IE!
nietonfir

14

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

Et rappelez-vous toujours d'utiliser la couleur hexadécimale RGBA dans le filtre: eq # 004F80 est # ed004F80
user956584

9

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

24
L'alpha d'arrière-plan n'est pas la même chose que l'opacité (cela ne rend pas l'élément enfant transparent également).
Alexey Smolyakov

1
Cela ne répond pas à la question et le CSS n'est pas appliqué via jQuery (ou JavaScript en général) une solution de crossbrowser.
mystrdat

7

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!


2
Comment cela fonctionne - L'URL rgba.php est-elle uniquement demandée par les navigateurs qui ne le prennent pas en charge rgba? Ou est-il toujours demandé par tous les utilisateurs, et tout simplement pas affiché?
Darren Cook

J'espère que le navigateur verra automatiquement le deuxième arrière-plan et ignorera le premier, avant de tenter de faire une demande. Mais c'est tout au plus une supposition éclairée.
Pivotant

7

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

5

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.


4
haha cas typique d'un navigateur n'agissant pas comme les autres, et chaque version de ce navigateur n'agissant pas comme les autres versions du même navigateur ... seul Microsoft pourrait y parvenir avec autant de succès ...
ClarkeyBoy

3
@Paul D. Waite: Il existe de très nombreuses fonctionnalités que les navigateurs offrent en plus de la façon dont ils rendent le contenu. S'écarter des spécifications n'est pas (ou ne devrait pas être) une fonctionnalité.
Bobby Jack

@Paul D.Waite: Ok, je vois votre point de vue, mais ce que je veux dire, c'est que les différentes versions d'IE agissent si différemment que je me retrouve obligé de créer une feuille de style différente pour chaque version ... J'ai des feuilles de style différentes pour IE6, 7 et 8 ... pourtant je n'ai qu'une seule feuille de style pour tout FF / Chrome / Opera / Safari. @Bobby Jack: Secondé ...
ClarkeyBoy

@Bobby: Bien sûr, mais IE 8 ne s'écarte pas plus des normes que IE 7 ou IE 6, sûrement?
Paul D.Waite

@ClarkeyBoy: bien sûr. Je trouve que ma feuille de style IE 8 est beaucoup plus simple que ma feuille de style IE 6. IE est le plus étrange des navigateurs, mais il s'aligne lentement sur les autres. Firefox n'a pas pris en charge rgba()jusqu'à la version 3, et Opera ne l'a pas pris en charge jusqu'à la version 10.
Paul D. Waite


2

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


Je suis à la recherche de ce convertisseur ARGB en RGBA pour toujours, merci! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

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

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

À votre santé


1

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

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

0

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

0

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

0

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

0

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/
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.