Traditionell liegen die in CSS verwendeten Farben entweder im Hexadezimalformat oder im RGB-Format vor, z. B. rgb(171,205,239).
.jpg)
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 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) das Attribut -khtml-opacity. Safari mit KHTML-Kern unterstützt es tatsächlich nicht mehr (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