Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.
Statut
Standard
Pourcentages
100% correspond à une opacité complète, 0% à une transparence totale.
Module W3C
Module filtres et effets
Références (W3C)
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 fonction opacity() peut être utilisée avec :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Applique un filtre graphique (flou, contraste...) à un élément.

Syntaxe 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.

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.

filter :

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
Gestion de la transparence ou semi-transparence des éléments, textes, images, etc.
Colonne 2
Compatibilité des navigateurs avec la fonction CSS opacity().
1
Transparency
Opacity
2
opacity()
Estimation de la prise en charge en pourcentage du parc actuel.
99%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que opacity().

Les spécifications CSS éditées par le W3C sont organisées en modules. opacity() fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Applique un filtre graphique sur l'élément situé en arrière plan.
Définit dans quel espace de couleurs sont calculés les effets de filtrage.
Applique un filtre graphique (flou, contraste...) à un élément.

Fonctions.

Applique un effet de flou.
Ajuste la luminosité d'un élément.
Ajuste le contraste d'une image.
Définit l'ombre d'un élément (dimensions, flou, couleur).
Convertit une image en nuances de gris (noir et blanc).
Change les couleurs d'une image (rotation des teintes).
Inverse les couleurs d'une image.
Définit la saturation des couleurs d'une image.
Applique un effet sépia à une image.