Utilitaires

Opacité

Les classes opacity-* rendent un élément plus ou moins transparent. Elles s’appliquent à tout l’élément, texte et fond compris.

Niveaux d’opacité#

Cinq niveaux sont disponibles, de 0 (invisible) à 100 (opaque).

opacity-100

opacity-75

opacity-50

opacity-25

opacity-0

<div class="d-flex flex-wrap gap-2">
  <div class="opacity-100 p-3 text-bg-primary">opacity-100</div>
  <div class="opacity-75 p-3 text-bg-primary">opacity-75</div>
  <div class="opacity-50 p-3 text-bg-primary">opacity-50</div>
  <div class="opacity-25 p-3 text-bg-primary">opacity-25</div>
  <div class="opacity-0 p-3 text-bg-primary">opacity-0</div>
</div>

Opacité du texte seul#

Pour ne changer que la transparence de la couleur du texte, utilisez plutôt text-opacity-* avec une couleur de texte (voir Couleurs).

Solde disponible : 1 250 000 FCFA

<p class="text-primary mb-1">Solde disponible : 1 250 000 FCFA</p>
<p class="text-primary text-opacity-75 mb-1">Solde disponible : 1 250 000 FCFA</p>
<p class="text-primary text-opacity-50 mb-0">Solde disponible : 1 250 000 FCFA</p>

Classes disponibles

Classes disponibles
Classe	Valeur
`opacity-0`	`opacity: 0`
`opacity-25`	`opacity: 0.25`
`opacity-50`	`opacity: 0.5`
`opacity-75`	`opacity: 0.75`
`opacity-100`	`opacity: 1`
`text-opacity-25`, `-50`, `-75`, `-100`	Définissent `--bs-text-opacity`, utilisée par les classes de couleur de texte.

Bonnes pratiques

À faire

Réservez opacity-50 ou moins aux éléments secondaires ou désactivés visuellement.

À éviter

N’utilisez pas opacity-0 pour masquer un contenu : il reste lu par les lecteurs d’écran et reste cliquable.

Accessibilité

Une opacité réduite diminue le contraste : vérifiez qu’il reste suffisant pour le texte.
Pour masquer vraiment un élément, voyez Visibilité ou Visuellement masqué.