Comment ajouter la transparence dans CSS à l'aide de la propriété Opacity?

La transparence peut être ajoutée aux éléments, tels que des images et des conteneurs Div pour améliorer l'apparence globale d'un site Web. Dans le but de rendre un élément transparent, la propriété CSS Opacity est utilisée. Cette propriété peut rendre des valeurs à partir de 0.0 à 1.0. Dans cet article, nous allons vous guider comment ajouter la transparence aux éléments. Ce message couvre les sujets suivants.

1. Comment ajouter la transparence à un élément
2. Ajout d'un effet de survol avec la transparence
3. Comment ajouter la transparence à un élément
4. Ajout de la transparence avec RGBA

Commençons.

Comment ajouter la transparence à un élément

Vous pouvez faire n'importe quel élément (e.g. image) qui apparaît sur votre site Web transparent, en attribuant une certaine valeur à la propriété CSS Opacité de l'élément.

Exemple

Pour comprendre le concept de transparence, suivez l'exemple ci-dessous.

Html

Ici, nous avons ajouté une image et réglé sa largeur à 200px et une hauteur à 250px.

CSS

img
Opacité: 0.6;

L'opacité de l'image a été définie sur 0.6.

Sortir

L'image est opaque à 60%.

Note: L'opacité et la transparence sont opposées les unes aux autres. Par conséquent, de faibles valeurs de propriété d'opacité rendront l'élément plus transparent et vice versa.

Par exemple, si nous diminuons l'opacité et la définissons sur 0.2 comme ça.

img
Opacité: 0.2;

La transparence augmentera.

L'image est à 20% opaque.

Ajout d'un effet de survol avec la transparence

Vous pouvez ajouter un effet de survol et attribuer une certaine opacité à l'image. L'ajout de cet effet modifiera la transparence d'une image lorsque l'utilisateur amène la souris sur une image particulière.

Exemple

L'exemple ci-dessous montre comment utiliser un effet de survol avec la propriété Opacity.

Html

Dans le code ci-dessus, nous ajoutons une image et lui donnons une certaine largeur et hauteur.

CSS

img
Opacité: 0.4;

IMG: Hover
Opacité: 1.0;

Dans le code CSS ci-dessus, nous attribuons d'abord une opacité de 0.4 Pour rendre l'image transparente, nous ajoutons un effet de survol à l'image avec l'opacité 1. Cela signifie que lorsque l'utilisateur amène la souris sur l'image, elle ne sera pas transparente et l'inverse se produira lorsque le curseur de la souris sera éloigné de l'image.

Sortir

Un effet de survol est ajouté avec succès à l'image avec la transparence.

Comment ajouter la transparence à un élément et à ses enfants

En utilisant la propriété Opacité, lorsque vous ajoutez de la transparence à un élément, les enfants de cet élément particulier héritent également de la transparence.

Exemple

Ici, nous allons montrer comment ajouter la transparence à un élément.

Html

J'ai une opacité de 0.6

J'ai une opacité de 1

Ici, nous avons créé deux éléments pour indiquer clairement comment la transparence fonctionne pour les éléments HTML.

CSS

div.Opacité
Opacité: 0.4;

div
Color en arrière-plan: rose;
rembourrage: 15px;

Le premier élément div a une transparence de 0.4 et l'autre élément est complètement non transparent.

Sortir

Plus un élément est transparent, le contenu à l'intérieur de cet élément sera également transparent.

Ajout de la transparence avec RGBA

Les couleurs RGBA sont utilisées pour éviter la situation ci-dessus, où lorsque vous appliquez l'opacité à un élément, le contenu à l'intérieur de l'élément devient également transparent.

Exemple

Pour empêcher le texte présent à l'intérieur d'un élément de devenir transparent, utilisez le code suivant.

Html

Avec une propriété d'opacité

Avec la couleur RGBA

Dans le code ci-dessus, nous créons deux éléments. Le premier div a reçu une opacité de 0.2 pour démontrer la différence entre l'utilisation de la propriété Opacital uniquement et l'utilisation de la propriété Opacity avec les couleurs RGBA.

CSS

div.rgb
Contexte: RVB (255,192,203);
rembourrage: 15px;
Opacité: 0.2;

div.rgba
Contexte: RGBA (255 192 203, 0.2);

La première div a reçu une couleur de fond rose, un rembourrage de 15px et une opacité de 0.2. Tandis que le deuxième div a été attribué la même couleur d'arrière-plan avec une opacité de 0.2 comme quatrième argument dans la méthode RGBA.

Sortir

Le texte à l'intérieur de l'élément ne devient pas transparent lors de l'utilisation de la transparence avec les couleurs RGBA.

Conclusion

Vous pouvez ajouter de la transparence à divers éléments HTML tels que des conteneurs DIV ou des images à l'aide de la propriété Opacity. Cette propriété rend les valeurs de 0.0 à 1.0, de plus, plus la valeur de cette propriété est faible, plus la transparence est inférieure. Parallèlement à la transparence, vous pouvez également ajouter un effet de survol sur les éléments, en outre, utilisez les couleurs RGBA pour empêcher le contenu d'un élément de devenir transparent lorsque vous y ajoutez la transparence. Ce message vous guide comment ajouter la transparence dans CSS à l'aide de la propriété Opacity ainsi que des exemples pertinents.