Opacity() - Fonction CSS

opacity()

Résumé des caractéristiques de la fonction `opacity()`

Description rapide

Détermine le degré de transparence d'un élément (filtre graphique).

Statut

Standard

Pourcentages

100% correspond à une opacité complète, 0% à une transparence totale.

Module W3C

Module filtres et effets

Références (W3C)

Filter Effects Module Level 1

Statut du document: WD (document de travail)

Description de la fonction `opacity()`.

La fonction opacity() détermine le degré de transparence d'un élément.

Le bouton ci-dessous a une opacité de 75% : l'élément parent (en arrière-plan) est légèrement visible à travers.
Remarque : l'opacité s'applique aussi bien au contenu de l'élément qu'à son arrière-plan : la fonction opacity() ne permet donc pas de faire apparaître l'arrière-plan de l'élément, mais seulement l'arrière-plan (et éventuellement le contenu) des autres éléments situés derrière lui.

Note : il existe également une propriété opacity qui a le même rôle. Il est donc possible de cumuler les effets de la propriété et ceux de la fonction.

La transparence est appliquée à l'élément et à tous ses enfants. ce n'est pas le mécanisme d'héritage habituel, car même si on fixe à 1 l'opacité des enfants, ils auront tout de même la transparence définie pour le parent.

La valeur `opacity()` peut être utilisée avec les propriétés suivantes :

backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction `opacity()`.

filter: opacity(50%); v

v est une valeur sans unité entre 0 et 1, ou un pourcentage. Les valeurs négatives ne sont pas autorisées.
v est le niveau d'opacité de l'élément : O définit un élément totalement transparent, donc invisible, tandis que 1 ou 100% définit un élément totalement opaque.

Si la valeur v n'est pas précisée (parenthèses vides), la fonction opacity() applique la valeur 100% par défaut.

Simulateur avec la fonction `opacity()`

Nous avons placé un bouton dans l'élément dont on gère l'opacité. Vous constaterez que, même avec une opacité de 0, c'est à dire invisible, le bouton continue de réagir aux clics de la souris.

Compatibilité et prise en charge par les navigateurs.

L'opacité (ou la transparence) des éléments est très bien traitée par les navigateurs actuels.

Colonne 1

Support par les navigateurs d'une méthode permettant d'ajuster l'opacité d'un élément (sa transparence).

Colonne 2

Support de la fonction opacity() qui, utilisée avec la propriété filter, permet de fixer l'opacité d'un élément et de ses descendants.

Gestion de
l'opacité

Fonction
opacity()

Estimation de la prise en charge globale.

98%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `opacity()`.

Module effets et filtres - Niveau 1

Première version du module CSS définissant les filtres graphiques (Filter effects), y compris la fonction opacity().

25 Octobre 2012
Document de travail.

Voir aussi : autres effets et filtres graphiques.

La spécification du W3C Filter Effects Module décrit les filtres et effets graphiques qui existent. En voici la liste, ainsi que celle des propriétés qui permettent de les mettre en œuvre.

Propriétés :

backdrop-filter

Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.

color-interpolation

Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.

color-interpolation-filters

Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB

filter

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

flood-color

Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.

flood-opacity

Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.

lighting-color

Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()

blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.

brightness()

Ajuste la luminosité d'un élément (filtre graphique).

contrast()

Ajuste le contraste d'un élément (filtre graphique).

drop-shadow()

Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).

grayscale()

Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.

hue-rotate()

Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).

invert()

Inverse les couleurs d'un élément (filtre graphique).

saturate()

Définit la saturation des couleurs d'un élément (filtre graphique).

sepia()

Applique un effet sépia à un élément (filtre graphique).