Browserübergreifender transparenter rgba-Hintergrund, während der Inhalt (Text und Bilder) nicht transparent ist

Question

Ich möchte, dass rgba-Hintergründe in allen Browsern funktionieren. Ich habe einige Suche und fand heraus, dass in der Regel gibt es drei Arten von Browsern da draußen:

1) Browser, die rgba unterstützen.

2) Internet Explorer, der rgba über das bizarre '-ms-filter' Ding unterstützt.

3) Browser, die rgba nicht unterstützen, aber ich könnte base64 png Bilder mit 'data URI scheme' verwenden. (Auch wenn der Browser das URI-Schema nicht unterstützt, kann ich laut diese es könnte noch getan werden).

Ich habe keine Probleme mit rgba unterstützenden Browsern, und ich kann es mit IE arbeiten, aber Problem ist, dass ich keine Ahnung, wie man Client-Seite base64 png Bilder für URI-Schema zu generieren. Ich möchte wirklich nicht png-Dateien vorgenerieren, weil meine rgba-Werte nicht konstant sind. Ich könnte mit dynamischen png-Generierung mit php gd-Bibliothek gehen, aber ich würde wirklich gerne all dies auf Client-Seite zu tun. Also würde ich gerne wissen, gibt es eine gute Möglichkeit, da draußen für die Generierung von semi-transparenten png-Bilder mit Java-Skript. Danach könnte ich nur base64 kodieren sie und verwenden sie mit URI-Schema?

Ich danke Ihnen.

Bearbeiten:

Ich möchte einen halbtransparenten Div-Hintergrund haben, während der Inhalt vollständig sichtbar ist.

Answer 1

Siehe diesen Blogbeitrag für eine browserübergreifende Methode:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Unterstützung von Webbrowsern

RGBa-Unterstützung ist verfügbar in: Firefox 3+ Safari 2+ Opera 10

Filter im Internet Explorer sind sind seit Internet Explorer 5.5 verfügbar.

Dies bedeutet, dass dies funktioniert für praktisch jeden!

Siehe hier für eine einfache Möglichkeit, die Farben für die IE-Filter zu erzeugen.

Dadurch sollte die Verwendung von "base64 png images with 'data URI scheme'" überflüssig werden.

---

Wenn Sie wirklich, wirklich wollen, um Client-Seite generieren .png Bilder (ich sehe hier keine Notwendigkeit dafür):

Erzeugen von PNG-Dateien auf der Client-Seite mit JavaScript. Eigentlich eine tolle Idee:

Es war wieder einmal eine dieser Nächte in denen ich wie auf Drogen hackte und kein Ende in Sicht. Klar, vor 5 Jahren hast du mich mit so einem Projekt geliebt, aber in Zeiten von HTML5 mit dem Canvas Element ist es schwer, euch zu beeindrucken. Also nehmen Sie es als Beweis für die Erstellung von clientseitigen Bilder auf der Client-Seite ohne Canvas, SVG oder serverseitiges Rendering und AJAX Verarbeitung.

Aber wie ist das möglich? Nun, ich habe eine client-seitige JavaScript Bibliothek wie libpng implementiert, die einen PNG-Datenstrom erzeugt. Die daraus resultierenden binären Daten können an die Daten angehängt werden URI-Schema mit Base64-Kodierung angehängt werden.

Answer 2

Ich denke, Browser, die rgba nicht unterstützen, unterstützen auch base64 nicht. Sie können jedoch einfach ein 2x2 px halbtransparentes png-Hintergrundbild verwenden (nicht 1x1, um einen seltsamen Fehler mit IE zu vermeiden).

Answer 3

Sie können Transparenz den ganzen Weg zurück zu pre-Webkit Safari, IE5, Firefox .9... verwenden. So alt, dass niemand es benutzt. http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

Natürlich können Sie diese css-Eigenschaften für einzelne Elemente über Ihre bevorzugten Javascript-Bibliotheken oder von Hand einstellen. Als Ausweichlösung sollten Sie also Ihre RBG normal einstellen und dann die entsprechende Transparenz hinzufügen