Sélection de la langue

Recherche

Opacité

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

L'utiliser pour modifier l'opacité d'un élément.

Conception et codage

Utilisation de base

Défaut

L'utiliser pour appliquer une opacité ou une transparence à un élément d'avant-plan afin que l'arrière-plan devienne visible.

Apparence

Défaut :

Image par défaut, un carré gris

Avec l'opacité :

opct-100

Démonstration d'opct-100

opct-90

Démonstration d'opct-90

opct-80

Démonstration d'opct-80

opct-70

Démonstration d'opct-70

opct-60

Démonstration d'opct-60

opct-50

Démonstration d'opct-50

opct-40

Démonstration d'opct-40

opct-30

Démonstration d'opct-30

opct-20

Démonstration d'opct-20

opct-10

Démonstration d'opct-10
Bonne utilisation

Points de conformité :

  • Utilisez .opct-90 à .opct-10 pour changer l'opacité d'un élément d'avant-plan et pour rendre l'arrière-plan visible à travers
    • Les niveaux d'opacité varient par degrés de 10
    • Le style .opct-100 rend une image entièrement visible, ce qui s'apparente beaucoup au paramètre par défaut
    • Le style .opct-10 donne à une image une visibilité de 10 %
  • Utilisez .opct-100 lorsqu'il faut une apparition en fondu à 100 % ou une disparition en fondu de 100 %
  • Assurez-vous que la nouvelle couleur de texte plus claire répond toujours aux exigences d'accessibilité relatives au contraste des couleurs
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
  • Ne pas l'utiliser si l'opacité fait en sorte que le contenu d'avant-plan soit difficile à voir ou à lire
Code
<img class="opct-100" src="x.jpg" alt="">
<img class="opct-90" src="x.jpg" alt="">
<img class="opct-80" src="x.jpg" alt="">
<img class="opct-70" src="x.jpg" alt="">
<img class="opct-60" src="x.jpg" alt="">
<img class="opct-50" src="x.jpg" alt="">
<img class="opct-40" src="x.jpg" alt="">
<img class="opct-30" src="x.jpg" alt="">
<img class="opct-20" src="x.jpg" alt="">
<img class="opct-10" src="x.jpg" alt="">

Utilisation améliorée

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Date de modification: