Arrière-plans CSS

Table des matières

Afficher la table des matières

Les propriétés d'arrière-plan CSS sont utilisées pour ajouter des effets d'arrière-plan pour les éléments.

Dans ces chapitres, vous découvrirez les propriétés d'arrière-plan CSS suivantes :

couleur de fond
image d'arrière-plan
répétition d'arrière-plan
pièce jointe d'arrière-plan
position d'arrière-plan
background (propriété abrégée)

couleur d'arrière-plan CSS

La propriété background-color spécifie la couleur d'arrière-plan d'un élément.

Exemple

La couleur d'arrière-plan d'une page est définie comme ceci :

body {
  background-color: lightblue;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

Avec CSS, une couleur est le plus souvent spécifiée par :

un nom de couleur valide - comme "rouge"
une valeur HEX - comme "#ff0000"
une valeur RVB - comme "rgb(255,0,0)"

Regardez les valeurs de couleur CSS pour un aperçu complet liste des valeurs de couleur possibles.

Autres éléments

Vous pouvez définir la couleur d'arrière-plan de n'importe quel élément HTML :

Exemple

Ici, les éléments <h1>, <p> et <div> auront des couleurs d'arrière-plan différentes :

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Opacité/Transparence

La propriété opacity spécifie l'opacité/transparence d'un élément. Il peut prendre une valeur comprise entre 0,0 et 1,0. Plus la valeur est faible, plus c'est transparent :

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Exemple

div {
  background-color: green;
  opacity: 0.3;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

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

<h1>Transparent Boxes</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">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Remarque : 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 difficile la lecture du texte à l’intérieur d’un élément entièrement transparent.

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 (RVBA) - 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(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

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

</body>
</html>

La propriété CSS de couleur d'arrière-plan

background-color: Définit la couleur d'arrière-plan d'un élément