opacity() - Fonction CSS
Résumé des caractéristiques de la fonction opacity()
100%
correspond à une opacité complète, 0%
à une transparence totale. 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 que1
ou100%
définit un élément totalement opaque.Si la valeur
v
n'est pas précisée (parenthèses vides), la fonctionopacity()
applique la valeur100%
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.
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.
opacity()
.
Opacity
opacity()
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.