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