La fonction CSS opacity()
permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur <filter-function>
.
{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : Cette fonction est proche de la propriété opacity
mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.
Syntaxe
opacity(multiplicateur)
Paramètres
multiplicateur
- L'intensité de l'opacité, indiquée comme un nombre (
<number>
) ou comme un pourcentage (<percentage>
). Une valeur de0%
entraînera une image complètement transparente. Une valeur de100%
laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera1
.
Exemples
opacity(0%); /* Complètement transparente */
opacity(50%); /* 50% transparent */
opacity(1); /* Aucun effet */
Voir aussi
<filter-function>
- La propriété CSS
opacity