Explication de la propriété d'opacité CSS et de l'opacité de l'image

La opacitypropriété contrôle le degré d'opacité d'un élément sur une échelle de 0,0 à 1,0. Plus la valeur est basse, plus l'élément est transparent.

Vous pouvez choisir dans quelle mesure vous souhaitez rendre l'élément transparent. Vous devez ajouter la propriété CSS suivante pour atteindre les niveaux de transparence.

Entièrement opaque

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Semi-transparent

.class-name { opacity: 0.5; }

Entièrement transparent

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Vous pouvez également utiliser rgbapour définir l'opacité d'un élément:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Cela définit le background-colord'un élément en noir avec une opacité de 50%. La dernière valeur d'une rgbavaleur est la valeur alpha . Une valeur alpha de 1 est égale à 100% d'opacité et 0,5 (ou 0,5 comme ci-dessus) est égale à 50% d'opacité.

Opacité et transparence de l'image

La opacitypropriété vous permet de rendre une image transparente en réduisant son opacité.

Opacity prend une valeur comprise entre 0,0 et 1,0.

1.0 est la valeur par défaut pour toute image. Il est totalement opaque.

Exemple

img { opacity: 0.3; }

Inclure filter: alpha(opacity=x)pour IE8 et versions antérieures. Le x prend une valeur de 0 à 100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Voici un exemple d'image définie sur les paramètres de l'exemple ci-dessus.

image à 30% d'opacité

Vous pouvez associer opacityavec :hoverpour créer un effet dynamique de survol de la souris.

Exemple:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Un exemple de codepen pour afficher une image transparente devenant opaque en survol

Vous pouvez créer l'effet inverse avec moins de code car l'image a une opacité de 1,0 par défaut

Exemple:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Voici un exemple de codepen pour montrer la transparence au survol de la souris.

En savoir plus sur CSS

Feuilles de style en cascade (CSS)

CSS est un acronyme pour les feuilles de style en cascade. Il a été inventé pour la première fois en 1996 et est maintenant une fonctionnalité standard de tous les principaux navigateurs Web.

CSS permet aux développeurs de contrôler l'apparence des pages Web en «stylisant» la structure HTML de cette page.

Les spécifications CSS sont gérées par le World Wide Web Consortium (W3C).

Vous pouvez créer des choses assez étonnantes en CSS seul, comme ce jeu de démineur en CSS pur (qui n'utilise pas de JavaScript).