La propriété d’opacité CSS (Opacity) est utilisée pour spécifier la transparence d’un élément. En un mot simple, vous pouvez dire qu’il spécifie la clarté de l’image.
En termes techniques, l’opacité est définie comme le degré auquel la lumière peut traverser un objet.
Comment appliquer le paramètre d’opacité CSS
Le paramètre d’opacité est appliqué uniformément sur tout l’objet et la valeur d’opacité est définie en termes de valeur numérique inférieure à 1. La valeur d’opacité inférieure indique l’opacité supérieure. L’opacité n’est pas héritée.
Exemple d’opacité CSS: image transparente
Voyons un exemple simple d’opacité CSS de transparence d’une image.
<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>Image normale</p>
<img src="rose.jpg" alt="normal rose">
<p>Image transparente</p>
<img class="trans" src="rose.jpg" alt="transparent rose">
</body>
</html>
Résultat :
Remarque : Chrome, Firefox, Opera, Safari et IE9 utilisent la propriété opacity pour la transparence. La valeur d’opacité varie de 0,1 à 1,0. Une valeur inférieure produit une opacité supérieure.