opacity()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2016⁩.

La fonction CSS opacity() permet de modifier la transparence de l'image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: opacity(1);

filter: opacity(80%);

filter: opacity(50%);

filter: opacity(0.2);

filter: opacity(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

css

opacity(amount)

Paramètres

amount Facultatif: Niveau de transparence, exprimé en nombre (<number>) ou en pourcentage (<percentage>). Une valeur de 0% rend l'image complètement transparente, tandis qu'une valeur de 100% laisse l'image inchangée. Les valeurs comprises entre 0% et 100% appliquent un effet proportionnel. La valeur initiale utilisée pour l'interpolation est 1. La valeur par défaut est 1.

Syntaxe formelle

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )

Exemples

Exemples de valeurs correctes pour `opacity()`

css

opacity(0%)   /* Complètement transparente */
opacity(50%)  /* TTransparent à 50% */

opacity()     /* Aucun effet */
opacity(1)

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-opacity

Compatibilité des navigateurs

Voir aussi

Les autres fonctions <filter-function> pouvant être utilisées dans les valeurs des propriétés filter et backdrop-filter sont :
La propriété CSS opacity

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨14 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content