Opacité/transparence des images CSS

Le opacity La propriété spécifie l’opacité/transparence d’un élément.

Image transparente

Le opacity propriété peut prendre une valeur comprise entre 0,0 et 1,0. Plus la valeur est faible, plus la transparence est grande :

opacité 0.2

opacité 0.5

opacité 1
(défaut)

Effet de survol transparent

Le opacity propriété est souvent utilisée avec la :hover
sélecteur pour changer l’opacité au passage de la souris :

Exemple expliqué

Le premier bloc CSS est similaire au code de l’exemple 1. De plus, nous avons ajouté ce qui doit se passer lorsqu’un utilisateur survole l’une des images. Dans ce cas, nous voulons que l’image ne soit PAS transparente lorsque l’utilisateur la survole. Le CSS pour cela est opacity:1;.

Lorsque le pointeur de la souris s’éloigne de l’image, l’image redevient transparente.

Un exemple d’effet de survol inversé :

Boîte transparente

Lors de l’utilisation du opacity propriété pour ajouter de la transparence à l’arrière-plan d’un élément, tous ses éléments enfants héritent de la même transparence. Cela peut rendre le texte à l’intérieur d’un élément entièrement transparent difficile à lire :

Transparence avec RGBA

Si vous ne souhaitez pas appliquer d’opacité aux éléments enfants, comme dans notre exemple ci-dessus, utilisez RVBA valeurs de couleur. L’exemple suivant définit l’opacité de la couleur d’arrière-plan et non celle du texte :

Vous avez appris dans notre chapitre sur les couleurs CSS que vous pouvez utiliser RVB comme valeur de couleur. En plus de RVB, vous pouvez utiliser une valeur de couleur RVB avec un canal alpha (RGBA) – qui spécifie l’opacité d’une couleur.

Une valeur de couleur RGBA est spécifiée avec : rgba(red, green, blue, alpha). Le
alpha Le paramètre est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

Conseil: Vous en apprendrez plus sur les couleurs RGBA dans notre chapitre sur les couleurs CSS.

Texte dans une boîte transparente

Exemple expliqué

Tout d’abord, nous créons un élément