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

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?

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.

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

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

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

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!

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

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.

Ich bin zu spät zur Party, aber für alle anderen, die dies finden - dieser Artikel ist sehr nützlich: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Es verwendet den Verlaufsfilter, um feste, aber transparente Farben anzuzeigen.

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

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

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

Prost

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

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

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

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

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

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/