Opacité de couleur d'arrière-plan CSS

L'opacité de la couleur est utilisée pour définir la transparence de la couleur dans CSS. Il est utilisé pour spécifier la clarté de la couleur. La valeur alpha définit la transparence de la couleur dans «RGBA» et la propriété «Opacité» est utilisée pour définir l'opacité ou la transparence de la couleur. Nous pouvons définir l'opacité de la couleur d'arrière-plan dans CSS en utilisant la propriété Opacité et la valeur alpha. Sa valeur est de «0.0 ”à« 1.0 ”. Le «0.La valeur de 0 ”est utilisée pour une couleur entièrement transparente et« 1.0 ”est pour une couleur opaque complète. Dans ce tutoriel, nous utiliserons ces valeurs d'opacité pour modifier l'opacité des couleurs. Nous explorerons des exemples et vous montrerons la différence de couleurs lorsque nous utiliserons la valeur d'opacité avec la couleur d'origine. Jetons un coup d'œil aux exemples suivants:

Exemple 1:

Ouvrez le fichier HTML et créez quatre titres dans le fichier HTML afin que nous puissions appliquer la couleur d'arrière-plan et modifier l'opacité de la couleur à l'aide de CSS. Dans ce tutoriel, nous utilisons le Visual Code Studio pour exécuter ces codes de HTML et CSS. Nous créons le fichier HTML dans ce logiciel et écrivons le HTML. Le code est fourni dans l'image suivante:

Ceci est l'image du code HTML qui est mentionné ci-dessus. Nous changerons l'opacité de la couleur d'arrière-plan de tous les titres et vous montrerons la couleur avec différentes valeurs d'opacité.

Code CSS:

Nous allons créer un fichier CSS où nous utilisons la propriété CSS pour modifier l'opacité de la couleur d'arrière-plan des titres ci-dessus. Dans ce code, nous utilisons la propriété «Opacité» de CSS.

Pour diriger 1 «H1», nous avons réglé le «Color en arrière-plan» sur «Jaune». «L'opacité» est «0.4 ”pour cette rubrique et la couleur de la police est« noir ». Le titre 2 «Color en arrière-plan» est également «jaune» mais «l'opacité» est ici «0.6 ”. La «couleur arrière-plan» de la tête 3 est également «jaune» mais cette fois, «l'opacité» est «0.8 ”. Maintenant, vient le titre 4. Son «couleur arrière» est le même que les titres précédents, mais nous n'utilisons pas ici la couleur «opacité». Ainsi, la «couleur fond» du quatrième cap apparaît comme la couleur «jaune» d'origine.

Sortir:

La différence de valeur d'opacité de la couleur d'arrière-plan est indiquée dans cette sortie. Vous pouvez voir la différence entre l'opacité de la couleur dans cette image.

La première couleur d'arrière-tête montre plus de transparence car la valeur d'opacité de la couleur d'arrière-plan est «0.4 ”. Le deuxième titre est moins transparent que la couleur d'arrière-plan de la première tête car sa valeur d'opacité est «0.6 ”. Ensuite, comme la deuxième tête, la couleur d'arrière-plan de la troisième tête est moins transparente que la seconde. Cette fois, «l'opacité» est «0.8 ”. Et dans le dernier titre, nous avons utilisé la couleur jaune d'origine sans utiliser de valeur d'opacité.

Exemple n ° 2:

Dans ce code HTML, nous avons deux titres et quatre paragraphes. Chaque paragraphe est écrit à l'intérieur de la classe «div» et ces classes «div» sont nommées respectivement «First», «Second» et «Third». Nous utiliserons ces noms de div lorsque nous styliserons ces paragraphes dans CSS. Nous changerons l'opacité de la couleur d'arrière-plan de chaque paragraphe.

Code CSS:

Ceci est le code CSS où nous définissons la couleur de l'en-tête 1 comme «vert». Le texte des titres 1 et 2 est aligné dans le «centre» en utilisant le «Text-Align». Définissez la couleur «DIV» «vert» en utilisant «RVB (0, 151, 19)». Le «rembourrage» est «10px» de la gauche, de la droite, du haut et du bas. Le «Text-Align» utilisé ici est «justifier» . Maintenant, utilisez le premier div où nous avons changé la couleur d'arrière-plan vert avec la valeur d'opacité de «0.2 ”et est écrit sous la forme de« RGBA (0, 151, 19, 0.2) ". La «valeur d'opacité» ici est «0.2 ”. La valeur «alpha» représente «l'opacité». La couleur d'arrière-plan de la deuxième div est également verte avec la valeur alpha de «0.4 ”. La valeur alpha pour la troisième div est «0.7 ”avec la même couleur verte.

Sortir:

Ici, vous pouvez voir que le premier paragraphe montre plus de transparence que le deuxième paragraphe car la valeur alpha ou opacité du premier paragraphe est «0.2 ”ce qui signifie qu'il a une« opacité «20%». L'opacité ou la valeur alpha du deuxième paragraphe est «0.4 ”et il est moins transparent que le premier paragraphe. Dans la couleur d'arrière-plan du troisième paragraphe, la valeur alpha est «0.7 ”et vous remarqueriez qu'il est moins transparent. Dans le dernier paragraphe, la couleur de fond est la couleur «verte» d'origine. Nous n'avons pas utilisé de valeur alpha dans le dernier titre.

Exemple # 3:

Pour le troisième exemple, nous allons écrire différents titres en HTML avec «l'identifiant» et user plus tard ces «ID» pour donner différents styles à ces titres dans CSS.

Code CSS:

Dans ce code CSS, nous modifierons l'opacité de la couleur d'arrière-plan d'une couleur et utiliserons également la couleur d'origine dans le paragraphe suivant. Reportez-vous à l'image suivante pour le code CSS:

Ici, nous utilisons l'ID de paragraphe, puis fournissons la couleur d'arrière-plan à tous les paragraphes. Pour «P1», nous définissons le «RBGA (255, 0, 0, 0.3) ”qui est le code de couleur« rouge »avec une valeur alpha de« 0.3 ”. Pour «P11», nous utilisons la même couleur mais sans la valeur alpha ou opacité. Le «P2» est défini comme «RGBA (0, 255, 0, 0.4) ”qui est le code de la couleur« verte »et sa valeur alpha est« 0.4 ”. Ensuite, le «P22» est de la même couleur «verte» sans valeur alpha. La valeur RGBA «P3» est «(0. 0. 225, 0.5) ”qui est la couleur« bleue »avec une valeur alpha de« 0.5 ”. Le «P33» a la couleur «bleue» d'origine et n'a pas d'opacité. Le «P5» a la valeur d'opacité de «0.7 ”et le code couleur est« RGBA (255, 255, 0, 0.7) ”qui représente« jaune ». Le «P55» ne contient aucune valeur alpha. La couleur «P6» est «rose» avec une valeur d'opacité de «0.8 ”et le code est écrit comme« RGBA (255, 0, 255, 0.8) ". Le dernier paragraphe, «P66», a le «fond de fond» de «rose» sans opacité.

Ici, la couleur d'arrière-plan du premier paragraphe est rouge mais avec une valeur d'opacité de 0.3 qui le rend plus transparent. Le paragraphe suivant contient la couleur d'arrière-plan rouge d'origine et vous pouvez facilement observer la différence entre la couleur d'origine et la couleur lorsque nous utilisons la valeur d'opacité. Dans le troisième paragraphe, la couleur d'arrière-plan est affichée comme vert avec une valeur d'opacité de «0.4 ”. Dans le quatrième paragraphe, la couleur de fond est «verte» sans aucune valeur alpha. La couleur «bleue» du cinquième paragraphe est affichée et sa valeur d'opacité est «0.5 ”. La couleur d'arrière-plan «bleu» d'origine est également indiquée dans le «sixième» paragraphe. Le paragraphe suivant montre une couleur «grise» utilisée avec un «0.Valeur d'opacité de 6 ”et ce gris d'origine est également utilisé dans le paragraphe suivant comme couleur d'arrière-plan. La couleur «jaune» a «0.7 ”Opacité tandis que« Cerise »a« 0.8 ”. Les deux couleurs originales sont également affichées dans les couleurs d'arrière-plan du paragraphe.

Conclusion

Ce tutoriel vous est fourni afin que vous puissiez apprendre le concept de l'opacité de couleur d'arrière-plan dans CSS. Nous avons appris deux méthodes pour modifier l'opacité: l'une consiste à utiliser la propriété «Opacité» et l'autre est en utilisant «RGBA» dans laquelle «Alpha» est utilisé pour régler la valeur de transparence de la couleur d'arrière-plan. Nous avons montré les couleurs d'arrière-plan avec l'opacité ou la valeur alpha et sans valeur d'opacité en détail. Essayez ces exemples, puis utilisez ces valeurs d'opacité dans vos codes.