Opacité du texte CSS

L'opacité est définie dans CSS comme une «transparence». L'opacité du texte est l'effet de transparence que nous appliquons à tout texte. Nous avons deux propriétés différentes dans CSS pour définir l'opacité du texte. Pour définir l'opacité du texte, nous utiliserons la propriété «Opacité» ainsi que la valeur de l'alpha qui détermine l'opacité du texte dans «RGBA». En utilisant la propriété Opacité et en modifiant la valeur alpha dans RGBA, nous pouvons ajuster l'opacité du texte dans CSS. L'opacité varie entre «0.0 ”et« 1.0.«La couleur« complètement transparente »a une valeur de« 0.0 ”tandis que la couleur« totalement opaque »a une valeur de« 1.0 ”. Nous utiliserons les propriétés CSS pour modifier l'opacité du texte dans ce guide.

Exemple n ° 1: Utilisation de la propriété Opacity

Nous avons besoin de certains paragraphes pour utiliser la fonction d'opacité dans CSS. Nous allons faire des paragraphes HTML ici. Pour ce faire, nous devons d'abord construire le fichier HTML. Visual Studio Code est le logiciel que nous utiliserons pour effectuer ces exemples. Vous pouvez le faire dans n'importe quel logiciel comme le bloc-notes. Nous faisons des classes «div» avec des noms différents dans le corps. À l'intérieur de chaque div, nous créons un paragraphe avec le «

" étiqueter. Nous allons faire trois divs avec des noms uniques comme «T1», «T2» et «T3». Nous créons des paragraphes à l'intérieur de ces div. En conséquence, trois paragraphes ont été créés. Nous utiliserons également ce code HTML pour d'autres exemples. Maintenant, nous allons aller dans le fichier CSS et appliquer l'opacité CSS au texte. Dans l'élément «tête» du code HTML, nous avons également lié le fichier CSS à cette page HTML.

Nous définissons la couleur «rouge» d'origine sur la rubrique en utilisant la propriété «couleur» et stylisez cette rubrique comme «italique». Ensuite, nous utilisons le nom de la première div «T1» dans laquelle nous avons un paragraphe et définissons sa «taille de police» à «16px». Nous utilisons le «rouge» pour la police «couleur». Mais dans la ligne suivante, nous utilisons la propriété «Opacité». Ainsi, lorsque nous utiliserons cette propriété, elle ajoutera une certaine opacité à l'effet de transparence de notre couleur de texte. Ici, nous définissons un «0.Valeur de 8 ”à cette propriété« Opacité ». Pour le prochain «div.T2 ”, nous avons défini la même« taille de police »« 16px »et la même« couleur »« rouge »« couleur ». Mais cette fois, la valeur de «l'opacité» est changée en «0.5 ”pour le paragraphe du deuxième div. Pour le troisième et le dernier «div.T3 ”, nous utilisons« 0.3 ”comme valeur« opacité ».

Voici la sortie, voyez que la couleur du texte apparaît avec différentes valeurs d'opacité. La couleur de la tête est la couleur rouge d'origine, mais la couleur des paragraphes apparaît avec certaines valeurs d'opacité. Les trois paragraphes ont des valeurs d'opacité différentes.

Exemple # 2: Utilisation de la valeur alpha dans RGBA

Ici, nous allons utiliser les valeurs RGBA dans lesquelles «A» est pour la valeur alpha et cette valeur alpha définit l'opacité du texte. Tout d'abord, nous mettons simplement la valeur RVB à l'en-tête et la valeur RVB que nous utilisons ici représente la couleur «violet». Ensuite, nous utilisons le mot-clé «italique» pour définir le «style de police» de la rubrique. Nous l'avons également mis en tant que «Font-Family» et utilisons la police «algérienne» pour cela. Il est aligné dans le «centre» en utilisant la propriété «Text-Align».

Ensuite, nous allons utiliser le premier «div.T1 ”et utilisez la valeur« RGBA ». Ici, nous avons mis la valeur «RVB» de la couleur violette, puis avons également réglé sa valeur alpha sur «0.9 ”. Après cela, nous avons défini la même valeur «RVB» mais avons changé la valeur alpha et l'avons définie sur «0.7". De plus, nous avons un autre paragraphe Div et pour ce dernier «div.T3 ”paragraphe, nous utilisons le« 0.Valeur alpha de 5 ”qui définit son opacité à« 0.Valeur 5 ”.

Remarquez dans le résultat comment la couleur du texte change en fonction de la valeur alpha. La couleur de l'en-tête est le violet d'origine. Mais la couleur des paragraphes a des valeurs alpha qui définissent son opacité. Les valeurs d'opacité dans les trois paragraphes sont différentes.

Exemple # 3:

Tout d'abord, nous allons définir la «couleur d'arrière-plan» de tout le corps et le régler sur «noir». Ensuite, nous utilisons à nouveau des valeurs RGBA où «A» représente la valeur alpha. Cette valeur alpha détermine l'opacité du texte comme nous l'avons discuté ci-dessus. Pour commencer, nous ajoutons simplement la valeur RVB à l'en-tête, le numéro RVB que nous utilisons ici symbolise la couleur «gris clair». Nous utilisons le premier «div.T1 ”et la valeur« RGBA »où nous insérons la valeur« RGB »de la même couleur que l'en-tête et définissons sa valeur alpha sur« 0.7". Après cela, nous avons défini la même valeur «RVB» qu'auparavant. Cette fois, nous avons changé la valeur alpha en «0.4 ”. Nous avons également un autre paragraphe Div et nous utilisons le «0.Valeur alpha de 2 ”pour modifier l'opacité de ce dernier« div.T3 ”paragraphe à« 0.2 ”.

Observez comment la couleur du texte varie à mesure que la valeur alpha change. Le titre est la couleur d'origine mais la couleur des paragraphes comprend des valeurs alpha qui déterminent leur opacité. Les trois paragraphes ont des valeurs d'opacité distinctes.

Exemple n ° 4:

Nous créons neuf classes Div différentes ici avec un nom unique pour chaque div et allons appliquer toutes les valeurs d'opacité sur chaque div séparément dans CSS.

Nous stylisons tout le corps et définissons le texte dans le «centre» de la page. Ainsi, tous les paragraphes apparaissent dans le «centre». Nous avons également défini «audacieux» pour tout «corps» à l'aide de «Font-Weight» et fixé la taille de la police ou du texte à «20px». Notre ruban apparaîtra dans la couleur «maroon» originale alors que nous fixons cette couleur dans la propriété «couleur». L '«algérien» est le «Font-Family» pour le titre. Nous définissons la même couleur pour tous les divs en utilisant la propriété «couleur». Dans tous les paragraphes de Div, nous avons changé la valeur de «l'opacité». Dans chaque div, nous diminuons la valeur de l'opacité par une telle telle pour les autres div, nous définissons la valeur de «l'opacité» à «0.9 ”. Ensuite, pour le prochain div, nous définissons la valeur de cette propriété d'opacité sur «0.8 ”. Pour la troisième div, nous utilisons «0.Valeur d'opacité 7 ”et ainsi de suite. De cette façon, nous modifions les valeurs d'opacité à chaque fois pour chaque div.

Ici, regardez la sortie ci-dessous, les valeurs d'opacité du texte commencent à partir de «0.9 ”et se terminer à« 0.1". La couleur d'origine est également utilisée ici pour l'en-tête et tous les paragraphes contiennent des valeurs d'opacité.

Conclusion:

Nous avons créé ce guide pour vous dans lequel nous modifions l'opacité du texte et apprenons à modifier l'opacité du texte dans CSS. Nous avons expliqué ici que l'opacité est utilisée pour donner un effet transparent au texte. Nous avons également exploré les propriétés CSS par lesquelles nous pouvons modifier l'opacité du texte. Nous avons décrit et démontré comment utiliser la propriété «Opacité» et la valeur «alpha» de RGBA pour modifier l'opacité du texte.