l'opacité de fond CSS avec rgba ne fonctionne pas dans IE 8
https://stackoverflow.com/questions/3975688
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'utilise ce CSS pour l'opacité de fond d'un <div>:
background: rgba(255, 255, 255, 0.3);
Il fonctionne très bien dans Firefox, mais pas dans IE 8. Comment puis-je le faire fonctionner?
La solution
Créer une image PNG qui est plus grand que 1x1 pixels (grâce thirtydot), et qui correspond à la transparence de l'arrière-plan.
EDIT: pour se replier pour le soutien IE6 +, vous pouvez spécifier morceau bkgd pour le .png, c'est une couleur qui remplacera la vraie transparence alpha si elle n'est pas pris en charge. Vous pouvez le fixer avec gimp par exemple.
Autres conseils
pour simuler RVBA et HSLA fond dans IE, on peut utiliser un filtre à gradient, avec la même couleur de début et de fin (alpha canal est la première paire de 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 crois que c'est le meilleur parce que sur cette page a un outil pour vous aider à générer de l'alpha-transparent fond:
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 transparent ne fonctionnera pas dans IE 6, des 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 tout simplement le faire 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 les œuvres de rgba façon.
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: // Ica .verou.me / wp-content / uploads / 2009/02 / rgba.zip
Je sais qu'il ne peut pas être la solution idéale pour tout le monde, mais il est utile d'envisager dans certains cas, car il permet d'économiser beaucoup de temps et fonctionne parfaitement. L'espoir qui aide quelqu'un!
Il y a la plupart du temps tout le soutien du navigateur code RGBA en CSS, mais seulement IE8 et en dessous du niveau ne supporte pas le code RGBA css. Pour cette solution est ici. Pour la solution, vous devez suivre ce code et il est préférable d'aller avec elle séquence de sinon vous ne serez pas obtenir une sortie parfaite que vous le souhaitez. Ce code est utilisé par moi et il est parfait pour la plupart. faire des commentaires si elle 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 auriez 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 ceci est que cela signifie quoi que ce soit à l'intérieur du conteneur sera également 0,3 opacité. Ainsi, vous devrez changer votre code HTML pour avoir un autre récipient, pas à l'intérieur d'une transparente, qui détient votre contenu.
Sinon, la technique de .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 quelqu'un d'autre qui trouve cela - cet article est très utile: http://kilianvalkhof.com/2010/css- xhtml / how-to-use-rgba-en-à-dire /
Il utilise le filtre à gradient pour afficher la couleur solide mais transparent.
Pour utiliser fond rgba dans IE il y a une solution de repli.
Nous devons utiliser la propriété de filtre. que les utilisations ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
est ce repli pour rgba(255, 255, 255, 0.2)
Changement #33ffffff selon vôtre.
Comment calculer ARGB pour RGBA
cela a fonctionné pour moi de résoudre le problème dans IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Vive
Cette solution fonctionne vraiment, essayer. Testé dans IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
Il est très simplement vous devez donner d'abord vous devez donner backgound comme rgb parce qu'Internet Explorer 8 soutiendra rgb à la place rgba et u doivent donner l'opacité comme filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
Cette 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 je trouve à ce jour est celle proposée par David J Marland dans son bloguer , à l'opacité de soutien 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 cherché beaucoup, je l'ai trouvé la solution suivante qui travaille dans mes affaires:
.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 ARVB (pour s) à partir RGBA, nous pouvons utiliser des outils en ligne:
