L'opacité de l'arrière-plan CSS avec rgba ne fonctionne pas dans IE 8
J'utilise ce CSS pour l'opacité de fond d'un <div>:
background: rgba(255, 255, 255, 0.3);
Cela fonctionne très bien dans Firefox, mais pas dans IE 8. Comment puis-je le faire fonctionner?
Créez un png supérieur à 1x1 pixel (merci thirtydot) et correspondant à la transparence de votre arrière-plan.
EDIT: pour avoir recours à IE6 +, vous pouvez spécifier le bloc bkgd pour le png. Il s’agit d’une couleur qui remplacera la transparence alpha réelle si elle n’est pas prise en charge. Vous pouvez le réparer avec gimp par exemple.
pour simuler l'arrière-plan RGBA et HSLA dans IE, vous pouvez utiliser un filtre de dégradé, avec les mêmes couleurs de début et de fin (le canal alpha est la première paire dans la valeur HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Je crois que c'est le meilleur, car sur cette page il y a un outil pour vous aider à générer un fond transparent:
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;
}
l'image png transparente ne fonctionnera pas dans IE 6-, les alternatives sont les suivantes:
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 juste le faire avec jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Bien que tardive, j’ai eu besoin de l’utiliser aujourd’hui pour trouver un script php très utile, ici , qui vous permettra de créer de manière dynamique un fichier png, un peu comme le mode de fonctionnement de 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 idéale pour tout le monde, mais il vaut la peine de réfléchir dans certains cas, car cela permet d’économiser beaucoup de temps et fonctionne parfaitement. J'espère que ça aide quelqu'un!
La plupart des navigateurs prennent en charge le code RGBa dans CSS, mais seuls les niveaux IE8 et 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 d’utiliser sa séquence, sinon vous n’obtiendrez pas une sortie parfaite comme vous le souhaitez. Ce code est utilisé par moi et c’est presque parfait. commentez 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 changer 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 sera également une opacité de 0,3. Ainsi, vous devrez changer votre code HTML pour avoir un autre conteneur, pas à l'intérieur du transparent, qui contient votre contenu.
Sinon, la technique png fonctionnerait. Sauf que vous auriez besoin d'un correctif pour IE6, ce qui en soi pourrait causer des problèmes.
Je suis en retard à la fête, mais pour tous ceux qui trouvent cela - 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 unie mais transparente.
Pour utiliser rgba background dans IE, il y a un repli.
Nous devons utiliser la propriété de filtre. qui utilise ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
il s’agit du repli pour rgba(255, 255, 255, 0.2)
Modifiez #33ffffff en fonction de la vôtre.
Comment calculer ARGB pour RGBA
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)";
}
La meilleure solution que j'ai trouvée jusqu'à présent est celle proposée par David J Marland dans son blog , afin de prendre en charge l'opacité des 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;
}
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;
}
C’est très simplement que vous devez donner d’abord vous devez donner un arrière-plan en tant que rgb car Internet Explorer 8 prend en charge rgb à la place de rgba puis vous devez donner une opacité semblable à filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
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'ARV (pour les IE) à partir de RGBA, nous pouvons utiliser les outils en ligne: