Traditionnellement, les couleurs utilisées en CSS sont soit au format hexadécimal, soit au format RVB, comme rgb(171,205,239).
.jpg)
CSS3 apporte de nouvelles façons de gérer la couleur, comme l'utilisation des canaux HSL (Teinte, Saturation, Lumière) et d'opacité/alpha. Malheureusement, actuellement, seuls Firefox 3+, Chrome 1.0+ et Safari 3+ et quelques navigateurs dérivés les prennent entièrement en charge. Mais nous pouvons faire de notre mieux, et IE ne commencera pas à prendre en charge certaines propriétés CSS3 avant Internet Explorer 9.
Opacité
Il s'agit en fait d'une propriété ancienne et, étonnamment, elle est prise en charge par les versions actuelles d'IE - bien que d'une manière plus compliquée.
L'opacité rend l'ensemble de l'objet CSS transparent et la transparence de tous les éléments enfants sera héritée de manière appropriée. La syntaxe officielle est la suivante :
opacité : [0-1 décimal] ;
Ainsi, un paramètre d'opacité : 0,5 ; rendrait l'objet transparent à 50 %. Bien que les navigateurs les plus récents le prennent activement en charge, les navigateurs plus anciens nécessitent toujours du code personnalisé, tout comme Internet Explorer.
Actuellement, pour les anciennes versions de Firefox, nous devons utiliser le préfixe -moz-, et pour les anciennes versions de Safari/Chrome, nous devons utiliser le préfixe -webkit-. Pour les anciennes versions de Safari qui utilisent toujours le noyau KHTML au lieu du noyau webkit, nous devons utiliser -khtml-. Donc, si nous voulons prendre en charge tous les navigateurs, notre code devrait ressembler à ceci :
opacité : 0,5 ;
-moz-opacité : 0,5 ;
-opacité du webkit : 0,5 ;
-khtml-opacité : 0,5 ;
Ah, attends une minute ! Que faire avec IE ? Eh bien, IE ne prend pas cela en charge du tout, mais il utilise un filtre propriétaire. La méthode traditionnelle est courte et concise :
filtre:alpha(opacité=50);
Veuillez noter que pour IE, nous devons utiliser des nombres entiers de 0 à 100, et non des décimales comme l'attribut opacity. Malheureusement, Internet Explorer 8 propose une nouvelle façon de gérer cela. N'essayez pas de vous souvenir de celui-ci comme de l'autre, c'est long :
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ;
Bien sûr, si vous souhaitez prendre en charge les anciens navigateurs IE, vous devrez utiliser le plus court ci-dessus, ce qui signifie que si vous souhaitez être compatible avec la plupart des navigateurs, vous aurez besoin d'un total de six instructions CSS.
PS : En fait, Safari prend en charge l'attribut opacity depuis la version 1.2 (2004). Safari avec le noyau KHTML est fondamentalement difficile à trouver. En fait, Konqueror n'a jamais pris en charge l'attribut -khtml-opacity, alors ne l'utilisez pas. (J'ai pris en compte l'intégrité du texte original lors de la traduction, je n'ai donc pas apporté de corrections au code ci-dessus). Opera prend en charge l'opacité CSS3 depuis la version 9.0, tandis que Firefox ne prenait pas en charge nativement l'opacité jusqu'à la version 3.5. Le filtre -ms- plus d'IE8 est vraiment une œuvre géniale de Microsoft ! Cependant, veuillez noter que si vous souhaitez utiliser filter et -ms-filter en même temps, veuillez noter que -ms-filter est écrit devant filter. ——Shenfei