Parlons de l'utilisation avancée des attributs RGBA qui sont actuellement largement utilisés dans CSS3. Le problème de compatibilité de cet attribut est relativement simple. IE8 prend déjà en charge cet attribut, et IE6 et IE7 peuvent également le prendre en charge via des hacks. RGBA est similaire à l'attribut RBG dans CSS2, sauf que l'attribut RGBA a une définition supplémentaire de la transparence. L'explication de l'attribut RGBA dans la norme CSS3 est la suivante :
| /*Syntaxe de base*/ em { couleur : Rgba ( rouge , vert , bleu , opacité ) } /* Exemple*/ em { couleur : rgba ( 255 , 0 , 0 , 1 ) } /* rouge, opaque */ em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Comme ci-dessus*/ |
En réalité, utiliser trois valeurs décimales de 1 à 255 pour définir une couleur est plus précis que d'utiliser des pourcentages. Voici les valeurs RVB de plusieurs couleurs. Lors de son utilisation, il vous suffit de convertir les valeurs hexadécimales. de 00 à FF en Decimal fera l'affaire.
La puissance du RGBA réside dans la possibilité de présenter davantage de couleurs grâce à la définition de la transparence et au mélange des couleurs dans différentes couches, tout comme le mélange des peintures. Par exemple, nous définissons d'abord une image d'arrière-plan pour la page, puis définissons une couleur pour le contenu dans H1 de la page, par exemple :
|
h1 { couleur : RVB ( 0 , 0 , 0 ) ; couleur d'arrière-plan : rgb ( 255 , 255 , 255 ) ; } |
Mais quel sera l'effet si je ne définis pas de transparence globale (attribut d'opacité) sur H1 ?
|
h1 { couleur : RVB ( 0 , 0 , 0 ) ; couleur d'arrière-plan : rgb ( 255 , 255 , 255 ) ; opacité : 0,5 ; } |
L’effet que nous constatons ici est que l’ensemble du H1, y compris le texte, est transparent à 50 %. Cependant, la transparence du texte affecte la lecture. Essayons d'utiliser l'attribut RGBA pour définir séparément la couleur d'arrière-plan de H1.
|
h1 { couleur : RVB ( 0 , 0 , 0 ) ; couleur d'arrière-plan : rgba ( 255 , 255 , 255 , 0.5 ) ; } |
h1 { |
RGBA peut être utilisé partout où une couleur doit être définie, par exemple :
| div { couleur : RVB ( 0 , 0 , 0 ) ; couleur d'arrière-plan : rgb ( 255 , 255 , 255 ) ; bordure : 10px rgba solide ( 255 , 255 , 255 , 0.3 ) ; } |
Définissez la transparence sur 30 % et une bordure blanche unie avec une largeur de ligne de 10 px pour tous les div.
| div { couleur : rgba ( 255 , 255 , 255 , 0,8 ) ; couleur d'arrière-plan : rgba ( 142 , 213 , 87 , 0.3 ) ; } div : survoler { couleur : rgba ( 255 , 255 , 255 , 1 ) ; couleur d'arrière-plan : rgba ( 142 , 213 , 87 , 0.6 ) ; } |
Passez la souris pour modifier la transparence.
De plus, s'ils sont combinés avec JavaScript, les attributs RGBA peuvent créer des effets plus éblouissants.
Changez vos habitudes d'écriture CSS
Dans les exemples ci-dessus, vous pouvez voir que l'auteur a utilisé rgb() pour spécifier les couleurs au lieu d'utiliser la forme traditionnelle #xxx de représentation hexadécimale. Il s'agit d'une méthode d'écriture préparée pour l'attribut RGBA de CSS3. Utiliser rgb() pour spécifier une couleur peut être compris comme rgba() étant opaque, mais la différence entre les deux est très petite, ce qui apportera une grande commodité à la mise à niveau vers rgba. () à l'avenir.
Compatible avec tous les navigateurs
Bien que les dernières versions des navigateurs grand public prennent déjà en charge les attributs RGBA, nous devons également faire attention aux utilisateurs qui utilisent des navigateurs plus anciens, donc dans certains endroits, nous serons plus en sécurité en utilisant l'ancienne méthode. Il existe plusieurs méthodes, et chacun peut choisir en fonction de ses besoins.
Bien que cela affecte l'effet dans les navigateurs de versions inférieures, il s'agit de la méthode la plus simple et la plus sûre. Les opérations spécifiques sont les suivantes :
| h1 {. couleur : RVB ( 127 , 127 , 127 ) ; couleur : rgba ( 0 , 0 , 0 , 0.5 ) ; } |
Définissez d'abord la couleur RVB, puis définissez la couleur rgba, de sorte que les navigateurs qui ne prennent pas en charge l'attribut rgba n'afficheront que la couleur RVB, tandis que les navigateurs prenant en charge rgba afficheront la couleur rgba en raison de la redéfinition.
L'avantage du format PNG est que la fonctionnalité de transparence dans l'image peut être affichée sur la page Web. Cette fonctionnalité est utilisée ici.
| h1 { arrière-plan : url transparente ( black50.png ) ; arrière-plan : rgba ( 0 , 0 , 0 , 0.5 ) aucun ; } |
Le même effet que le rgba est obtenu grâce à un arrière-plan PNG avec une transparence de 50%.
peut utiliser les attributs privés d'IE pour résoudre IE6 et IE7, ce qui peut produire certains des mêmes effets que rgba.
| h1 { filtre :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
Lien d'origine : Utilisation avancée des attributs CSS3 RGBA.
Merci à bolo pour sa contribution.