Modifier l'opacité du texte en CSS

1. Utiliser la propriété CSS opacity pour modifier la transparence du texte en CSS
2. Utilisez la fonction rgba() pour modifier la transparence du texte en CSS

Cet article présentera deux méthodes pour modifier l’opacité du texte en CSS.

Utiliser la propriété CSS opacity pour modifier la transparence du texte en CSS

La propriété opacity indique la transparence d’un élément. Il est généralement indiqué sur une échelle de 0 à 1, où 0 est complètement transparent.

Cela signifie qu’il est complètement invisible. De même, 1 est complètement opaque et 0.5 peut être considéré comme la référence en matière d’opacité des éléments car il est transparent à 50%.

Par exemple, créez un élément p et créez une classe avant. Tapez le texte de votre choix à l’intérieur de l’élément p.

Ensuite, créez un élément p similaire avec la classe after. Sélectionnez la classe before dans CSS et spécifiez red comme couleur de texte.

Pour la classe after, réglez la couleur sur red et la propriété opacity sur 0.4, sur une échelle de 0 à 1 selon votre souhait.

De même, nous pouvons également indiquer l’opacité de l’élément via un pourcentage. 0% est complètement transparent et 100% est complètement opaque. On peut aussi utiliser 40% à la place de 0.4.

Exemple de code :

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

Utilisez la fonction rgba() pour modifier la transparence du texte en CSS

La fonction rgba(), en général, sert à insérer la couleur à l’élément. Les lettres dans rgba() signifient rouge, vert, bleu et alpha.

Il indique que la fonction prend quatre valeurs. L’option alpha est une extension qui dénote l'opacité de l’élément.

Nous pouvons indiquer l’intensité de la couleur rouge, bleue ou verte sous la forme d’un nombre entier compris entre 0 et 255 ou entre 0 % et 100 %. Pour opacity, nous pouvons spécifier la valeur 0-1 et, bien sûr, la plage 0%-100%.

Nous pouvons utiliser la fonction rgba() comme option dans la propriété color.

Nous utiliserons le même modèle HTML que dans le premier exemple ci-dessus pour une démonstration. Sélectionnez la classe before et écrivez la fonction rgba() dans la propriété color en CSS.

Écrivez la valeur 0, 0, 255 dans la fonction, qui est le code de couleur pour la couleur bleue. Utilisez le même code couleur pour la classe after mais ajoutez 0.5 pour la valeur d’opacité.

En conséquence, le premier texte apparaît en bleu, tandis que le second sera moins opaque à mesure que nous y définirons l’opacité.

Exemple de code :

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

Ainsi, compte tenu de tous les faits, nous avons utilisé la propriété opacity et la fonction rgba() pour modifier la transparence du texte.