logo oujood
🔍

Définir la transparence avec la propriété CSS opacity

OUJOOD.COM

La propriété CSS opacity : définition et utilisation

La propriété CSS opacity permet de définir la transparence d'un élément HTML.

Syntaxe générale

La syntaxe générale de la propriété opacity est la suivante :

opacity: valeur;

Valeurs possibles

La valeur de la propriété opacity est un nombre compris entre 0 et 1, où :

  • 0 signifie une opacité totale (élément totalement transparent)
  • 1 signifie une opacité normale (élément totalement opaque)
  • Les valeurs entre 0 et 1 permettent de définir une opacité partielle (élément semi-transparent)

Exemples

Voici quelques exemples d'utilisation de la propriété opacity :

  • opacity: 0.5; : rend l'élément semi-transparent
  • opacity: 0; : rend l'élément totalement transparent (invisible)
  • opacity: 1; : rend l'élément totalement opaque (non-transparent)

Conseils et astuces d'utilisation

  • La propriété opacity affecte la transparence de l'élément ainsi que de ses descendants.
  • La propriété opacity peut également être utilisée en conjonction avec les propriétés CSS rgba() et hsla() pour définir une couleur semi-transparente.
  • Il est important de noter que la propriété opacity affecte également la visibilité des contenus enfant de l'élément. Si vous voulez que l'élément parent soit transparent mais que les contenus restent visibles, vous pouvez utiliser la propriété CSS background-color: rgba().
Valeurs par défaut 1
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.opacity="0.5"

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion 4 9 2 3.1 9

plus d'exemples pour l'utilisation de la propriété CSS opacity

La propriété opacité ajoute de la transparence à l'arrière-plan d'un élément, ainsi qu'à tous ses éléments enfants. Cela peut rendre le texte à l'intérieur d'un élément transparent difficile à lire :

Exemple :    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>La propriété css opacity</h1>

<p>La propriété opacité donne de la transparence à l'arrière-plan d'un élément, mais aussi à tous ses éléments enfants. Ainsi, le texte contenu dans un élément transparent deviendra difficile à lire :</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (par défaut)</p></div>

</body>
</html>

Pour ne pas appliquer l'opacité aux éléments enfants (comme dans l'exemple ci-dessus), utilisez plutôt des valeurs de couleur RGBA. L'exemple suivant définit l'opacité pour la couleur d'arrière-plan, mais pas pour le texte :

Exemple :    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>Boîtes transparentes </h1>

<h2>En utilisant la propriété d'opacité "opacity":</h2>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<h2>En utilisant les valeurs de couleur RGBA :</h2>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

</body>
</html>

En savoir plus sur la fonction rgba() ici

Comment utiliser JavaScript pour modifier l'opacité d'un élément :

Exemple :    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>La propriété css opacity </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#p1 {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>La propriété css opacity</h1>

<p id="p1">Sélectionnez une valeur dans la liste ci-dessous, pour modifier l'opacité de cet élément !</p>

<select onchange="myFunction(this);" size="5">
  <option>0
  <option>0.2
  <option>0.5
  <option>0.8
  <option selected="selected">1
</select>

<script>
function myFunction(x) {
  // Renvoie la valeur de l'option sélectionnée
  var opacity = x.options[x.selectedIndex].text;
  var el = document.getElementById("p1");
  if (el.style.opacity !== undefined) {
    el.style.opacity = opacity;
  } else {
    alert("Votre navigateur ne supporte pas cette propriété !");
  }
}
</script>
</body>
</html>

- Liste des propriétés css -