La propriété CSS opacity
La propriété CSS opacity définit le niveau de transparence d'un élément. Testez des exemples et observez les résultats.
La propriété CSS opacity définit le niveau de transparence d'un élément. Elle s'applique à l'élément entier — le texte, l'arrière-plan, les bordures et les éléments enfants s'estompent tous ensemble. C'est l'une des propriétés CSS3.
Utilisez opacity lorsque vous souhaitez qu'un élément (et tout ce qu'il contient) paraisse atténué : pour griser un bouton inactif, créer un effet de survol ou superposer un filigrane sur du contenu.
Comment fonctionne la valeur d'opacité
La valeur est un nombre compris entre 0 et 1 :
0— l'élément est entièrement transparent (invisible, mais il occupe toujours de l'espace et reste interactif).1— la valeur par défaut, l'élément est entièrement opaque.- Toute valeur intermédiaire, telle que
0.5, rend l'élément partiellement transparent. Des valeurs plus basses signifient une plus grande transparence.
Vous pouvez également exprimer la valeur en pourcentage dans les navigateurs modernes, où 50% est équivalent à 0.5.
Les valeurs négatives sont invalides et sont écrêtées — le navigateur traite tout ce qui est inférieur à 0 comme 0 et tout ce qui est supérieur à 1 comme 1.
L'opacité affecte également les éléments enfants. Lorsque vous atténuez un parent, chaque enfant s'estompe avec lui, et vous ne pouvez pas rendre un enfant entièrement opaque en lui donnant opacity: 1. Si vous souhaitez uniquement un arrière-plan semi-transparent tout en conservant le texte et les enfants solides, utilisez une couleur RGBA sur background-color à la place — par exemple background-color: rgba(142, 191, 66, 0.3).
Un élément dont la valeur d'opacity est inférieure à 1 crée un nouveau contexte d'empilement. Cela peut modifier la façon dont il chevauche les éléments voisins, de sorte qu'un élément atténué peut apparaître au-dessus ou en dessous de ses voisins différemment de ce que vous attendez.
| Valeur initiale | 1.0 |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.opacity = "0.3"; |
Syntaxe
Syntaxe CSS de opacity
opacity: number | initial | inherit;Exemple de la propriété opacity :
Exemple de code CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Résultat
Dans l'exemple ci-dessous, le niveau d'opacité de la première image est 1.0, la deuxième image est 0.6 et la troisième image est 0.2.
Exemple de la propriété opacity avec trois niveaux d'opacité :
Autre exemple de code CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</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>opacity vs. arrière-plans RGBA
Une erreur courante consiste à utiliser opacity lorsque vous souhaitez uniquement un arrière-plan semi-transparent. Parce que opacity atténue également les enfants, le texte à l'intérieur d'une boîte devient lui aussi flou et plus difficile à lire. Une couleur d'arrière-plan RGBA applique la transparence à la couleur de fond uniquement, en laissant le texte entièrement opaque :
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Pour contrôler la couleur de la boîte elle-même, voir background-color.
Atténuation au survol
Parce que opacity est animable, elle se combine naturellement avec transition pour créer des effets de fondu fluides, comme assombrir une image jusqu'à ce que l'utilisateur passe dessus :
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}opacity vs. visibility et display
opacity: 0, visibility: hidden et display: none masquent tous un élément, mais ils se comportent différemment :
| Déclaration | Visible | Occupe de l'espace | Cliquable |
|---|---|---|---|
opacity: 0 | Non | Oui | Oui |
visibility: hidden | Non | Oui | Non |
display: none | Non | Non | Non |
Un élément avec opacity: 0 est invisible mais répond toujours aux clics, donc ajoutez pointer-events: none si vous avez besoin qu'il soit également non interactif.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| number | Définit le niveau d'opacité. La valeur par défaut est 1.0. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |