Comment Définir la Couleur de Fond en HTML
La première chose à savoir est qu’il existe 3 types des couleurs HTML: les codes des couleurs Hex, les noms des couleurs HTML et les valeurs RVB. Pour choisir votre couleur préférée, utilisez notre outil Pipette de couleurs.
Commençons par le moyen le plus simple de définir une couleur de fond:
1. Ajouter la propriété background-color à l’élément <body>
La propriété background-color est utilisée pour changer le couleur de fond. En l’insérant dans l’élément <body>, vous aurez une couverture entièrement colorée de la page.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-color: #1c87c9;
}
</style>
</head>
<body></body>
</html>Vous pouvez également ajouter des couleurs dans votre document pour les éléments spécifiques. Par exemple, voyons comment changer le couleur des titres et des paragraphes.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-color: #e6ebef;
}
h2 {
background-color: #8ebf42;
}
p {
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Quelque titre avec un fond vert.</h2>
<p>Quelque paragraphe avec un fond bleu.</p>
</body>
</html>2. Ajouter l’attribut style à l’élément <body>
C’est aussi possible de définir une couleur du fond pour un document HTML en ajoutant style="background-color:” à l’élément <body>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body style="background-color:#1c87c9;">
<h1>Quelque titre</h1>
<p>Quelque paragraphe par exemple.</p>
</body>
</html>3. Créer un fond dégradé
Les fonds dégradés vous permettent de créer les transitions sans-à-coups entre deux ou plus couleurs spécifiés.
Il y a deux types de fond dégradé: linear-gradient (va en bas/haut/gauche/droite/en diagonale) et radial-gradient (défini par son centre).
Dans les fonds linear-gradient , on peut définir un point de début pour les couleurs. Si vous ne voulez pas mentionner un point de début, cela va automatiquement sera défini top to bottom par défaut.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#grad {
height: 500px;
background-color: blue; /* Pour les navigateurs qui ne supportent pas de gradient */
background-image: linear-gradient(to right, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Fond de dégradé linéaire de droite à gauche</h1>
<div id="grad"></div>
</body>
</html>L’exemple donné montre un gradient linéaire qui commence du gauche. Il commence avec bleu, avec la transition à vert. Changez le par rapport à vos demandes.
Dans les fonds radial-gradient, le point de début et définit par rapport au centre.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#grad {
height: 500px;
background-color: grey; /* Pour les navigateurs qui ne supportent pas de gradient */
background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Fond dégradé radial</h1>
<div id="grad"></div>
</body>
</html>4. Créer un fond changeant
Vous pouvez créer un fond, qui changera ses couleurs dans le temps mentionné. Pour ce but, ajoutez la propriété animation à l’élément <body>. Utilisez la règle @keyframes pour définir les couleurs de fond à travers de lequel vous passerez, bien que la longueur du temps chaque couleur va apparaître sur la page.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
-webkit-animation: colorchange 20s infinite;
animation: colorchange 20s infinite;
}
@-webkit-keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
@keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
</style>
</head>
<body>
<h1>Fond changeant</h1>
</body>
</html>Les pourcentages sont la longueur des animations qui est mentionnée dans colorchange (e.g. 20s).