Opacité/Transparence des images CSS

Table des matières

    Afficher la table des matières

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

Image transparente

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

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

Exemple

img {
  opacity: 0.5;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

Effet de survol transparent

La propriété opacity est souvent utilisée avec le sélecteur :hover pour modifier l'opacité au survol de la souris :

Northern Lights
Mountains
Italy

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

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é :

Northern Lights
Mountains
Italy

Exemple

img:hover {
  opacity: 0.5;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

Boîte transparente

Lorsque vous utilisez la propriété opacity 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 :

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Exemple

div {
  opacity: 0.3;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #04AA6D;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Transparence utilisant RGBA

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

100% opacity

60% opacity

30% opacity

10% opacity

Vous avez appris dans notre chapitre sur les couleurs CSS que vous pouvez utiliser RVB comme valeur de couleur. En plus du 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 Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).

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

Exemple

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% 
opacity */
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(4, 170, 109);
  padding: 10px;
}

div.first {
  background: rgba(4, 170, 109, 0.1);
}

div.second {
  background: rgba(4, 170, 109, 0.3);
}

div.third {
  background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

Texte dans une boîte transparente

This is some text that is placed in the transparent box.

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>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<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>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Exemple expliqué

Tout d'abord, nous créons un élément <div> (class="background") avec une image d'arrière-plan et une bordure.

Ensuite, nous créons un autre <div> (class="transbox") à l'intérieur du premier <div>.

Le <div class="transbox"> avoir une couleur de fond et une bordure - le div est transparent.

À l'intérieur du transparent <div>, nous ajoutons du texte à l'intérieur d'un élément <p>.