Propriété CSS opacity

La propriété opacity définit le niveau de la transparence d'un élément. Opacité est le contraire de la transparence.

Cette propriété permet de faire un élément complètement transparent, par défaut (1) ou semi-transparent.

Le nombre va de 0 à 1. La valeur de 1 est la valeur initiale, et elle fait l'élément complètement opaque. La valeur 0 fait l'élément comlètement transparent. Une valeur entre 0 et 1 rend graduellement un élément clair.

Valeurs négatives sont valides.

Quand on ajoute de transparence à l'arrière-plan d'un élément à l'aide de la propriété opacity, tous ses éléments enfants deviennent transparents aussi. Utilisez les couleurs RGBA si vous n'appliquez pas d'opacité aux éléments enfants.

Valeur initiale	1.0
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.opacity = "0.3";

Syntaxe

opacity: number | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example1 {
      background-color: #8ebf42;
      opacity: 0.3;
      filter: Alpha(opacity=50); /* IE8 and earlier */
      }
      .example2 {
      background-color: #8ebf42;
      opacity: 1;
      filter: Alpha(opacity=50); /* IE8 and earlier */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété opacity</h2>
    <h3>Niveau de l'opacité est 0.3;</h3>
    <div class="example1"> Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.  </div>
    <h3>Opacity level is 1;</h3>
    <div class="example2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où le niveau de l'opacité de la première image est 1.0, le niveau de l'opacité de la deuxième image est 0.6, et le niveau de l'opacité de la troisième image est 0.2:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      img.a{
      opacity: 1;
      filter: alpha(opacity=100); /* IE8 and lower */ 
      }
      img.b{
      opacity: 0.6;
      filter: alpha(opacity=100); /* IE8 and lower */ 
      }
      img.c{
      opacity: 0.2;
      filter: alpha(opacity=100); /* IE8 and lower */
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété opacity</h2>
    <h3>Opacity: 1.0;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="a">
    <h3>Opacity: 0.6;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="b">
    <h3>Opacity: 0.2;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="c">
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
number	Définit le niveau de l'opacité. La valeur initiale est 1.0.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.