Opacité/transparence CSS

opacity L'attribut spécifie l'opacité/transparence de l'élément.

image transparente

opacity La valeur de l'attribut peut varier de 0.0 à 1.0. Plus la valeur est basse, plus l'élément est transparent :

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

Exemple

img {
  opacity: 0.5;
}

Essayez-le vous-même

effet de transparence au survol

opacity L'attribut est généralement utilisé avec :hover Les sélecteurs peuvent être utilisés ensemble pour modifier l'opacité au survol de la souris :

Tulip
Tulip
Flower

Exemple

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Essayez-le vous-même

Explication de l'exemple

Le premier bloc CSS est similaire au code de l'exemple 1. De plus, nous avons ajouté un effet lorsque l'utilisateur place le curseur sur l'une des images. Dans ce cas, nous souhaitons que l'image soit opaque lorsque l'utilisateur place le curseur dessus. Ce CSS est opacity:1;.

Lorsque le pointeur de la souris quitte l'image, l'image redevient transparente.

Exemple d'effet inverse de survol :

Tulip
Tulip
Flower

Exemple

img:hover {
  opacity: 0.5;
}

Essayez-le vous-même

Boîte transparente

Utilisez opacity Lorsque l'attribut opacity est ajouté au fond d'un élément, tous ses éléments enfants héritent de la même transparence. Cela peut rendre difficile la lecture du texte contenu dans des éléments complètement transparents :

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Exemple

div {
  opacity: 0.3;
}

Essayez-le vous-même

Transparence en utilisant RGBA

Si vous ne souhaitez pas appliquer une transparence aux éléments enfants, comme dans l'exemple ci-dessus, utilisez la valeur de couleur RGBA. Dans l'exemple suivant, la couleur de fond est définie avec une valeur RGBA au lieu de la transparence du texte :

100% de transparence
60% de transparence
30% de transparence
10% de transparence

Vous avez déjà appris chez nous CSS Colors Dans ce chapitre, vous avez appris que les couleurs RGB peuvent être utilisées comme valeurs de couleur. En plus du RGB, les valeurs de couleur RGB peuvent être utilisées avec le canal alpha (RGBA) - ce canal détermine la transparence de la couleur.

La valeur de couleur RGBA est spécifiée comme suit : rgba(rouge, vert, bleu, alpha)。 alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

Astuce :Vous découvrirez dans notre CSS Colors Dans ce chapitre, vous apprendrez davantage sur les couleurs RGBA.

Exemple

div {
  background: rgba(76, 175, 80, 0.3) /* Niveau de transparence à 30% de vert */
}

Essayez-le vous-même

Texte dans la boîte transparente

Voici un texte situé dans une boîte transparente.

Exemple

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>Ce sont quelques textes situés dans un cadre transparent.</p>
  </div>
</div>
</body>
</html>

Essayez-le vous-même

Explication de l'exemple

Tout d'abord, nous créons un élément <div> avec une image de fond et une bordure (class="background").

Ensuite, nous créons un autre <div> dans le premier <div> (class="transbox").

<div class="transbox"> a une couleur de fond et une bordure - ce div est transparent.

Dans un <div> transparent, nous avons ajouté du texte dans l'élément <p>.