CSS Opacité
Opacité d'image CSS
La propriété opacité spécifie l'opacité ou la transparence d'un élément.
La propriété opacité peut prendre une valeur comprise entre 0.0 et 1.0 :
- 0.0 - L'élément sera complètement transparent
- 0.5 - L'élément sera à 50 % de transparence
- 1.0 - Par défaut, l'élément sera complètement opaque
opacité 0.2
opacité 0.5
opacité 1.0
(par défaut)
Exemple
img {
opacity: 0.5;
} Opacité et :hover
La propriété opacité est souvent utilisée avec :hover pour modifier l'opacité au survol de la souris :
Exemple
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
} Effet de survol inversé
Voici un exemple d'effet de survol inversé :
Exemple
img:hover {
opacity: 0.5;
} Boîtes transparentes
Lorsque vous utilisez la propriété opacité pour ajouter de la transparence à l'arrière-plan d'un élément, tous les éléments enfants héritent de la même transparence. Cela peut rendre le texte à l'intérieur d'un élément transparent difficile à lire :
opacité 1
opacité 0.6
opacité 0.3
opacité 0.1
Exemple
div {
opacity: 0.3;
} Transparence avec la couleur d'arrière-plan
Pour NE PAS appliquer la transparence aux éléments enfants, vous pouvez utiliser la propriété couleur d'arrière-plan avec une valeur RGBA.
Les valeurs de couleur RGBA sont une extension des valeurs de couleur RGB avec un canal alpha, qui spécifie l'opacité d'une couleur.
Une valeur de couleur RGBA est spécifiée sous la forme : rgba(rouge, vert, bleu, alpha). Le paramètre alpha est un nombre compris entre 0.0 (complètement transparent) et 1.0 (complètement opaque).
Astuce : Vous en apprendrez davantage sur les couleurs RGBA dans notre Chapitre sur les couleurs CSS .
L'exemple suivant définit l'opacité pour la couleur d'arrière-plan, et non pour le texte :
100 % d'opacité
60 % d'opacité
30 % d'opacité
10 % d'opacité
Exemple
div {
background: rgba(4, 170, 109, 0.3) /* Arrière-plan vert avec 30 % d'opacité */
} Texte dans une boîte transparente
Ceci est un texte placé dans la boîte transparente.
Exemple
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Ceci est un texte placé dans la boîte transparente.</p>
</div>
</div>
</body>
</html> Exemple expliqué
- Créez un élément <div> (class="background") avec une image d'arrière-plan et une bordure.
- Créez un autre <div> (class="transbox") à l'intérieur du premier <div>.
- Le <div class="transbox"> a une couleur d'arrière-plan transparente de 0.6 et une bordure.
- À l'intérieur du <div> transparent, nous ajoutons du texte à l'intérieur d'un élément <p>.
Propriété CSS
| Propriété | Description |
|---|---|
| opacité | Définit le niveau d'opacité d'un élément |