CSS Hintergrundopazität mit rgba funktioniert nicht in IE 8
https://stackoverflow.com/questions/3975688
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin mit diesem CSS für Hintergrundopazität eines <div>:
background: rgba(255, 255, 255, 0.3);
Es funktioniert gut in Firefox, aber nicht in IE 8. Wie mache ich es?
Lösung
Erstellen Sie eine png, die größer als 1x1 Pixel ist (dank thirtydot), und das entspricht die Transparenz Ihres Hintergrunds.
EDIT: für IE6 + Unterstützung zurückgreifen, Sie bkgd Brocken für die png angeben können, ist dies eine Farbe, die die wahre Alpha-Transparenz ersetzen wird, wenn es nicht unterstützt wird. Sie können es mit Gimp reparieren zB.
Andere Tipps
RGBA und HSLA Hintergrund in IE zu simulieren, können Sie einen Gradientenfilter verwenden können, mit der gleichen Start- und Zielfarbe (Alpha-Kanal ist das erste Paar im Wert von HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Ich glaube, das ist das Beste, weil auf dieser Seite ein Werkzeug zu Hilfe hat man Alpha-transparenten Hintergrund erzeugen:
http://hammerspace.co.uk/ 2011/10 / Cross-Browser-alpha-transparent-Hintergrund-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;
}
das transparente PNG-Bild wird nicht funktionieren in IE 6, Alternativen sind:
mit 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;
}
oder tun Sie es einfach mit jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Obwohl spät, ich hatte das heute zu nutzen und fand einen sehr nützlichen PHP-Skript hier , dass Sie dynamisch erlauben wird, eine pNG-Datei zu erstellen, ähnlich wie die Art und Weise rgba funktioniert.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
Das Skript kann hier heruntergeladen werden: http: // lea .verou.me / wp-content / uploads / 2009/02 / rgba.zip
Ich weiß, dass es nicht die perfekte Lösung für alle sein kann, aber es lohnt sich in einigen Fällen unter Berücksichtigung, da es viel Zeit spart und funktioniert einwandfrei. Hoffnung, dass jemand hilft!
Es gibt meist alle Browser-Unterstützung RGBa Code in CSS aber nur IE8 und unterhalb Ebene nicht RGBa CSS-Code unterstützen. Für das hier ist Lösung. Für die Lösung müssen Sie diesen Code folgen und es ist besser, mit ihm ist Folge zu gehen sonst werden Sie nicht perfekte Ausgabe erhalten, wie Sie möchten. Dieser Code wird von mir benutzt und es ist meist perfekt. machen Kommentar, wenn es perfekt ist.
.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);
}
Sie verwenden CSS die Opazität zu ändern. Zur Bewältigung IE müssen Sie so etwas wie:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
Aber das einzige Problem dabei ist, dass es etwas im Inneren des Behälters bedeutet auch 0,3 Trübung betragen. So werden Sie Ihre HTML ändern müssen, um einen anderen Behälter haben, nicht innerhalb der transparenten ein, dass Ihre Inhalte enthält.
Ansonsten ist die png-Technik funktionieren würde. Außer Sie einen Fix für IE6 brauchen würde, was an sich zu Problemen führen könnte.
Ich bin auf die Party zu spät, aber für alle anderen, die findet diese - dieser Artikel sehr nützlich ist: http://kilianvalkhof.com/2010/css- xhtml / how-to-use-RGBA-in-ie /
Es nutzt den Gradientfilters solide, aber transparente Farbe angezeigt werden soll.
Um die Verwendung rgba Hintergrund in IE gibt es einen Rückfall.
Wir haben Filtereigenschaft zu verwenden. dass Verwendungen ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
Das ist für Rückfall rgba(255, 255, 255, 0.2)
Ändern #33ffffff nach Ihnen.
Wie berechnen ARGB für RGBA
das für mich gearbeitet, um das Problem in IE8 zu lösen:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Prost
Diese Lösung wirklich funktioniert, versuchen Sie es. Getestet in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
Es ist sehr einfach, müssen Sie geben zuerst müssen Sie backgound als rgb geben, weil Internet Explorer 8 rgb statt rgba unterstützen und dann u haben Opazität geben wie filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
Dies ist eine Transparenz Lösung für die meisten Browser einschließlich 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;
}
Die beste Lösung, die ich bisher gefunden ist die von David J Marland in seinem Blog , um Unterstützung Opazität in alten Browsern (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;
}
Nach viel suchen, fand ich die folgende Lösung, die in meinen Fällen funktioniert:
.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;
}
* Wichtiger Hinweis: Um ARGB (für IEs) von RGBA zu berechnen, können wir Online-Tools verwenden:
