Opacity - Propriété CSS

opacity

Résumé des caractéristiques de la propriété `opacity`

Description rapide

Définit l'opacité (inverse de la transparence) d'un élément et de ses descendants.

Statut

Standard

Utilisable sur

HTML, SVG

Pourcentages

Calculés par rapport à 1 (opacité complète).

Valeur initiale

1

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété opacity passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Couleurs

Références (W3C)

🡇

🡅

CSS Color Module Level 4

Statut du document: WD (document de travail)

CSS Color Module Level 3

Statut du document: REC (recommandation)

Description de la propriété `opacity`.

La propriété opacity définit l'opacité d'un élément, c'est à dire son degré de transparence. Cette propriété permet de rendre un élément semi-transparent (ou complètement transparent). Elle s'applique à un élément dans son ensemble : son contour, l'arrière-plan et ses descendants.

Remarque : pour gérer l'opacité d'un arrière-plan seul, il est préférable d'appliquer à cet arrière-plan une couleur semi-transparente: avec la fonction rgba() ou autre, ou un code de couleur à 8 digits. Voir Les couleurs.

La propriété opacity a ceci de particulier qu'elle s'applique à l'ensemble constitué de l'élément lui-même et de ses descendants. Et ceci de façon globale, et non pas élément par élément. Autrement dit, si une opacité de 0.5 est demandée, elle sera appliquée sur l'ensemble construit, et non pas sur chacun des éléments. Ce n'est donc pas le mécanisme d'héritage habituel, d'ailleurs il n'est pas possible de rétablir l'opacité initiale des éléments enfants.

Rear

Middle

Front

Cette première image vous montre la construction de notre exemple : un premier bloc dénommé "Rear" comporte la couleur bleue et une image en arrière-plan. Il contient le bloc nommé "Médian" avec une image d'arrière-plan (les ronds), qui lui même contient le bloc avant avec un arrière-plan blanc.
Ici la propriété opacity n'a été utilisée : tous les blocs sont donc parfaitement opaques.


	‹div id="rear"›
	   ‹div id="median"›
		  ‹div id="front"›
		  ‹/div›
	   ‹/div›
	‹/div›

Rear

Médian

Front

L'opacité du bloc médian est maintenant réduite à 0.5. La couleur et l'image du bloc arrière sont donc légèrement visibles. Elle est également visible à travers le bloc avant mais sans que l'arrière plan du bloc médian soit visible. Ce n'est donc pas le bloc avant qui a perdu de l'opacité, mais bien l'ensemble construit des deux blocs (bloc médian et son descendant le bloc avant).

Rear

Médian

Front

Dans ce troisième échantillon, le bloc médian à toujours une opacité de 0.5, mais le bloc avant à une opacité demandée à 1. On voit que cela ne change rien : le bloc avant laisse toujours voir la couleur bleue et l'image du bloc arrière.
Ce n'est donc par le mécanisme habituel d'héritage qui est à l'œuvre.

Rear

Médian

Front

Cette opacité globale persiste même dans les parties qui débordent du parent, comme c'est le cas ici.

Valeurs pour `opacity`.

opacity: 0.5;

Un nombre sans unité, entre 0 et 1. Les valeurs négatives sont assimilées à 0.
1 correspond à l'opacité complète (pas de transparence)
0 correspond à une transparence totale (élément invisible).
Dans cet exemple L'opacité de l'élément sera de 50% (semi-transparent).
La valeur par défaut est 1 (opacité totale).
opacity: 30%;

L'opacité peut aussi être indiquée en pourcentages, 100% correspondant à une opacité totale, et 0% à un élément invisible car totalement transparent.

Valeurs communes :


opacity: initial  (1)
opacity: inherit
opacity: revert
opacity: revertLayer
opacity: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `opacity`.

Dans l'exemple ci-dessous les logos de Edge et de Internet Explorer sont superposés. En faisant évoluer la transparence du logo de Edge (qui est au dessus) on dévoile plus ou moins celui de Internet Explorer.

Manipulation de la propriété `opacity` par programme.

Modifier l'opacité en Javascript.

Voici comment modifier avec Javascript la valeur de opacity pour un élément el. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['opacity'] = '0.5';
	// ou
	let el = document.getElementById('id');
	el.style.opacity = '0.5';

Lire l'opacité en Javascript.

Le code donné ci-après explore l'attribut style de l'élément. Il ne récupère donc une valeur que si opacity a été initialisée dans cet attribut, et non pas via un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['opacity'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.opacity;

Lire la valeur calculée de `opacity` en Javascript.

La valeur calculée est celle qui résulte de la cascade des héritages. Elle est renvoyée sous la forme d'un nombre décimal compris entre 0 et 1, même si elle est a été définie en pourcentages.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('opacity');

Écrire l'opacité avec JQuery.


 $('#id').css('opacity', '0.5');

Lire la valeur calculée de l'opacité avec JQuery.

La valeur de l'opacité est retournée sous la forme d'un nombre décimal compris entre 0 et 1.


	let value = $('#id').css('opacity');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Faites le test vous même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété opacity et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de opacity. On constate en particulier que les pourcentages sont convertis en nombre décimal.

Simulateur avec la propriété `opacity`.

L'opacité définie sur un élément concerne tout le groupe composé de l'élément lui-même et de ses descendants. C'est particulièrement visible sur le tableau, on constate que la transparence s'applique aussi sur les lignes et les cellules du tableau.

opacity :

Effet de l'opacité sur du texte

1	2	3
4	5	6

Prise en charge de `opacity` par les navigateurs.

La propriété opacity est très bien gérée par les principaux navigateurs. Aucun problème de compatibilité n'est à signaler, y compris pour les valeurs exprimées en pourcentages, qui ont été un peu plus longues à être prises en compte.

Colonne 1

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

Colonne 2

Support des pourcentages pour la valeur de opacity.

Propriété
opacity

Valeur en
percentage

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 propriété `opacity`.

Module CSS - Couleurs - Niveau 3

Introduction de la propriété opacity.

23 Juin 1999
Document de travail.
14 Mai 2003
Candidat à la recommandation.
28 Octobre 2010
Proposé à la recommandation.
07 Juin 2011
Recommandation.
Module CSS - Couleurs - Niveau 4

Ajout des pourcentages comme valeur pour la propriété opacity.

05 Juillet 2016
Document de travail.
05 Juillet 2022
Candidat à la recommandation.

Voir aussi, à propos des couleurs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété opacity fait partie du module CSS Color Module.
Les définitions suivantes sont également décrites dans ce même module.