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 - Propriété CSS

opacity

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

Description rapide
Opacité (ou transparence).
Statut
Standard
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)
Statut du document:: WD (document de travail)

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

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

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.

Bloc arrière
Bloc médian
Bloc avant

Cette première image vous montre la construction de notre exemple : un premier bloc dénommé "bloc arrière" comporte la couleur bleue en arrière-plan. Il contient le bloc nommé "bloc 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="bloc-arriere"› ‹div id="bloc-median"› ‹div id="bloc-avant"› ‹/div› ‹/div› ‹/div›
Bloc arrière
Bloc médian
Bloc avant

L'opacité du bloc médian est maintenant réduite à 0.5. La couleur du bloc arrière est donc légèrement visible. 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).

Bloc arrière
Bloc médian
Bloc avant

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 du bloc arrière.
Ce n'est donc par le mécanisme habituel d'héritage qui est à l'œuvre.

Bloc arrière
Bloc médian
Bloc avant

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.

  • opacity: initial; opacity: inherit; opacity: revert; opacity: revert-layer; opacity: unset;

    La valeur initiale est : 1.

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.

Animation de la propriété CSS opacity Animation de la propriété CSS opacity

Manipulation de la propriété opacity par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

Résultat

Modifier la valeur de opacity 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).


function setOpacity(el) {
el.style['opacity']='0.5';
// ou
el.style.opacity='0.5';
}

Lire en Javascript la valeur de opacity.

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.


function getOpacity(el) {
alert(el.style['opacity']);
// ou
alert(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.


function getCalcOpacity(el) {
alert(window.getComputedStyle(el).getPropertyValue('opacity'));
}

Modifier la valeur de la propriété opacity avec JQuery.


function setOpacity(el) {
$(el).css('opacity','90%');
}

Lire la valeur calculée de la propriété opacity avec JQuery.

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


function getCalcOpacity(el) {
return $(el).css('opacity');
}

Simulateur.

opacity :

Effet de l'opacité sur du texte et sur une image

Exemple pour 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. Ici l'opacité du tableau est modifiée, on constate que la transparence s'applique aussi sur les lignes et les cellules du tableau.

123
456

Prise en charge par les navigateurs (compatibilité).

La propriété opacity est très bien gérée par tous les 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 de la propriété opacity par les navigateurs.
Colonne 2
Support des valeurs en pourcentages pour cette propriété.
1
opacity
2
Percentages
Estimation de la prise en charge en pourcentage du parc actuel.
99%
95%

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 CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur de l'avant plan (texte essentiellement).

Fonctions.

Définit une couleur dans un espace de couleurs autre que sRGB.
Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
Définit une couleur dans le système L*a*b*.
Définit une couleur dans le système L*C*H*.
Définit une couleur dans le système L*a*b* avec une correction perceptive.
Définit une couleur dans le système L*C*H* avec une correction perceptive.
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().