CSS-Hintergrundopazität mit rgba funktioniert in IE 8 nicht

110

Ich verwende dieses CSS für die Hintergrundopazität von <div>:

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

Es funktioniert gut in Firefox, aber nicht in IE 8. Wie bringe ich es zum Laufen?

Mond
quelle

Antworten:

73

Erstellen Sie ein PNG, das größer als 1x1 Pixel ist (danke 30 Punkte) und das der Transparenz Ihres Hintergrunds entspricht.

BEARBEITEN: Um auf die IE6 + -Unterstützung zurückzugreifen, können Sie bkgd chunk für das PNG angeben. Dies ist eine Farbe, die die echte Alpha-Transparenz ersetzt, wenn sie nicht unterstützt wird. Sie können es mit Gimp reparieren, z.

MatTheCat
quelle
2
Jep. rgba()Farbwerte werden in IE 8 nicht unterstützt.
Paul D. Waite
11
Um ein potenzielles Problem zu vermeiden, verwenden Sie eine andere Größe als 1x1: stackoverflow.com/questions/7764751/…
dreißig Punkte
43
Wäre 2003 akzeptabel, aber nicht 2013. Verwenden Sie entweder -ms-filter für eine etwas simulierte Unterstützung im alten IE oder, noch besser, ignorieren Sie es einfach. Menschen, die IE8 verwenden, verdienen es, bestraft zu werden, wenn sie den Randradius, den transparenten Hintergrund usw. nicht sehen.
Evgeny
21
@EugeneXa Ich arbeite für meine Kunden, nicht umgekehrt. Wenn sie IE8 verwenden, dann unterstütze ich es. Potenzielle Kunden zu bestrafen ist kein gutes Geschäft.
Eli
14
@EugeneXa Auf meinen Websites sind es fast 10%, und sie sind oft gute Kunden. Hier gibt es keine einzige richtige Antwort. Rechnen Sie nach und finden Sie heraus, was für Sie funktioniert. Sogar 6% könnten für einige Websites sehr groß sein! Kein Benutzer verdient es, bestraft zu werden. Ich denke, Sie werden diese Einstellung bereuen.
Eli
241

Um den RGBA- und HSLA-Hintergrund im IE zu simulieren, können Sie einen Verlaufsfilter mit derselben Start- und Endfarbe verwenden (Alphakanal 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 */
diablero13
quelle
2
Dies ist ein Vergnügen, außer leider scheint es nicht mehr zu funktionieren, wenn das Element dynamisch ausgeblendet und mit jQuery erneut angezeigt wird ...
jackocnr
rgba IE Filter war sehr nützlich und ich konnte Arbeit für> ie7
Kodierungbbq
Was ist die Opazität von 0,6 für den Filter?
Si8
10
Hex-Codes für Transparenz (das erste Paar) finden Sie hier: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295
2
Es gibt einen Taschenrechner für diese benutzerdefinierten Hex-Hex-Werte!
Nietonfir
14

Ich glaube, dies ist das Beste, da es auf dieser Seite ein Tool gibt, mit dem Sie einen alpha-transparenten Hintergrund generieren können:

" Cross Browser Alpha transparenter Hintergrund CSS (rgba) " (* jetzt verlinkt mit 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;
}
ah gut
quelle
Und denken Sie daran, immer RGBA Hex Farbe im Filter zu verwenden: Gleichung # 004F80 ist # ed004F80
user956584
9

Das transparente PNG-Bild funktioniert in IE 6- nicht. 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 mach es einfach mit jQuery:

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});
Thomas
quelle
24
Hintergrund-Alpha ist nicht dasselbe wie Deckkraft (es macht auch untergeordnete Elemente nicht transparent).
Alexey Smolyakov
1
Dies beantwortet weder die Frage noch wird CSS über jQuery (oder JavaScript im Allgemeinen) als Crossbrowser-Lösung angewendet.
Mystrdat
7

Obwohl spät, hatte ich das heute zu nutzen und fand einen sehr nützlichen PHP - Skript hier , das Sie erlaubt, dynamisch 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 möglicherweise nicht für jeden die perfekte Lösung ist, aber in einigen Fällen lohnt es sich, darüber nachzudenken, da es viel Zeit spart und einwandfrei funktioniert. Hoffe das hilft jemandem!

Camilo Delvasto
quelle
2
Wie funktioniert das rgba? Wird die URL rgba.php nur von Browsern angefordert, die dies nicht unterstützen ? Oder wird es immer von allen Benutzern angefordert und einfach nicht angezeigt?
Darren Cook
Ich hoffe, dass der Browser automatisch den zweiten Hintergrund sieht und den ersten ignoriert, bevor er versucht, eine Anfrage zu stellen. Aber das ist höchstens eine fundierte Vermutung.
Wirbel
7

Es gibt meistens alle Browser, die RGBa-Code in CSS unterstützen, aber nur IE8 und darunter unterstützen keinen RGBa-CSS-Code. Dafür ist hier Lösung. Für die Lösung müssen Sie diesem Code folgen und es ist besser, mit der Reihenfolge zu gehen, da Sie sonst nicht die perfekte Ausgabe erhalten, wie Sie es wünschen. Dieser Code wird von mir verwendet und ist größtenteils perfekt. Kommentar abgeben, 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);
 }
Pratik 1020
quelle
5

Sie verwenden CSS, um die Deckkraft zu ändern. Um mit IE fertig zu werden, benötigen Sie Folgendes:

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

Das einzige Problem dabei ist jedoch, dass alles im Behälter eine Deckkraft von 0,3 hat. Daher müssen Sie Ihren HTML-Code ändern, um einen anderen Container zu haben, der sich nicht in dem transparenten befindet und Ihren Inhalt enthält.

Andernfalls würde die PNG-Technik funktionieren. Außer Sie benötigen einen Fix für IE6, der an sich Probleme verursachen kann.

Coin_op
quelle
4
haha typischer Fall, in dem sich ein Browser nicht wie die anderen
verhält
3
@Paul D. Waite: Es gibt viele, viele Funktionen, die Browser bieten, außer wie sie Inhalte rendern. Abweichungen von der Spezifikation sind keine Funktion (oder sollten es auch nicht sein).
Bobby Jack
@Paul D. Waite: Ok, ich verstehe Ihren Standpunkt, aber ich meine, dass verschiedene Versionen von IE so unterschiedlich wirken , dass ich für jede Version ein anderes Stylesheet erstellen muss ... Ich habe verschiedene Stylesheets für IE6, 7 und 8 ... aber ich habe nur ein Stylesheet für alle FF / Chrome / Opera / Safari. @ Bobby Jack: abgeordnet ...
ClarkeyBoy
@ Bobby: Sicher, aber IE 8 weicht nicht mehr von den Standards ab als IE 7 oder IE 6, sicher?
Paul D. Waite
@ ClarkeBoy: sicher. Ich finde, mein IE 8-Stylesheet ist viel einfacher als mein IE 6-Stylesheet. IE ist der seltsamste Browser, aber er richtet sich langsam an den anderen aus. Firefox wurde rgba()erst in Version 3 unterstützt, und Opera unterstützte es erst in Version 10.
Paul D. Waite
2

Um den rgbaHintergrund im IE zu verwenden, gibt es einen Fallback.

Wir müssen die Filtereigenschaft verwenden. das nutztARGB

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

Dies ist ein Fallback für rgba(255, 255, 255, 0.2)

Ändern Sie #33ffffffnach Ihren Wünschen.

Wie berechnet man ARGBfürRGBA

shyammakwana.me
quelle
Ich habe schon immer nach diesem ARGB-RGBA-Konverter gesucht, danke! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin
1

Dies funktionierte für mich, um das Problem in IE8 zu lösen:

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

Prost

Guille
quelle
1

Diese Lösung funktioniert wirklich, probieren Sie es aus. In IE8 getestet

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

Es ist sehr einfach, dass Sie zuerst geben müssen, dass Sie Backgound als RGB angeben müssen, da Internet Explorer 8 RGB anstelle von RGBA unterstützt und Sie dann Opazität wie geben müssen filter:alpha(opacity=50);

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

Dies ist eine Transparenzlö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;
}
Ahmad
quelle
0

Die beste Lösung, die ich bisher gefunden habe, ist die von David J Marland in seinem Blog vorgeschlagene , um die Deckkraft in alten Browsern (IE 6+) zu unterstützen:

.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;
}
clami219
quelle
0

Nachdem ich viel gesucht hatte, 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;
}

* Wichtig: Um ARGB (für IEs) aus RGBA zu berechnen, können wir Online-Tools verwenden:

  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/
Reza Mamun
quelle