Traditionell liegen die in CSS verwendeten Farben entweder im Hexadezimalformat oder im RGB-Format vor, z. B. rgb(171,205,239).
CSS3 bietet einige neue Möglichkeiten, mit Farben umzugehen, beispielsweise die Verwendung von HSL (Farbton, Sättigung, Licht) und Deckkraft-/Alpha-Kanälen. Leider unterstützen sie derzeit nur Firefox 3+, Chrome 1.0+ und Safari 3+ sowie einige abgeleitete Browser vollständig. Aber wir können unser Bestes geben, und der IE wird einige CSS3-Eigenschaften erst mit Internet Explorer 9 unterstützen.
Opazität
Dies ist eigentlich eine alte Eigenschaft und wird überraschenderweise von aktuellen Versionen des IE unterstützt – wenn auch auf kompliziertere Weise.
Durch die Deckkraft wird das gesamte CSS- Objekt transparent und die Transparenz aller untergeordneten Elemente wird entsprechend vererbt. Die offizielle Syntax lautet wie folgt:
Deckkraft: [0-1 Dezimalzahl];
Eine Einstellung für die Deckkraft: 0,5 würde das Objekt also zu 50 % transparent machen. Obwohl neuere Browser dies aktiv unterstützen, erfordern ältere Browser immer noch benutzerdefinierten Code, genau wie der Internet Explorer.
Derzeit müssen wir für ältere Firefox-Versionen das Präfix -moz- und für ältere Safari/Chrome-Versionen das Präfix -webkit- verwenden. Für ältere Versionen von Safari, die noch den KHTML-Kernel anstelle des Webkit-Kernels verwenden, müssen wir -khtml- verwenden. Wenn wir also jeden Browser unterstützen wollen, sollte unser Code so aussehen:
Deckkraft: 0,5;
-moz-Opazität: 0,5;
-Webkit-Opazität: 0,5;
-khtml-Opazität: 0,5;
Ah, warte mal! Was tun mit dem IE? Nun, der IE unterstützt dies überhaupt nicht, verwendet aber einen proprietären Filter. Die traditionelle Methode ist kurz und prägnant:
filter:alpha(opazität=50);
Bitte beachten Sie, dass wir für den IE Ganzzahlen von 0 bis 100 verwenden müssen, keine Dezimalzahlen wie das Opazitätsattribut. Leider bietet Internet Explorer 8 eine neue Möglichkeit, damit umzugehen. Versuchen Sie nicht, sich dieses wie das andere zu merken, es ist lang:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
Wenn Sie ältere IE-Browser unterstützen möchten, müssen Sie natürlich den kürzeren oben genannten verwenden. Wenn Sie also mit den meisten Browsern kompatibel sein möchten, benötigen Sie insgesamt sechs CSS-Anweisungen.
PS: Tatsächlich unterstützt Safari seit Version 1.2 (2004) Safari mit KHTML-Kern. Tatsächlich hat Konqueror das Attribut -khtml-opacity nie mehr unterstützt, also verwenden Sie es bitte nicht (Ich habe bei der Übersetzung auf die Integrität des Originaltextes geachtet und daher keine Korrekturen am obigen Code vorgenommen.) Opera unterstützt die CSS3-Deckkraft seit 9.0, während Firefox die Deckkraft erst ab 3.5 nativ unterstützte. Der -ms- plus-Filter von IE8 ist wirklich eine geniale Arbeit von Microsoft! Bitte beachten Sie jedoch, dass, wenn Sie filter und -ms-filter gleichzeitig verwenden möchten, bitte beachten Sie, dass -ms-filter vor filter geschrieben wird. ––Shenfei