Contenu

• Avancer d'un pas
• Méthode 1 sur 4: Définition d'une couleur d'arrière-plan unie
• Méthode 2 sur 4: Utiliser une image comme arrière-plan
• Méthode 3 sur 4: créer un arrière-plan dégradé
• Méthode 4 sur 4: définir une animation de couleur comme fond d'écran

Pour pouvoir définir l'arrière-plan d'une page Web en HTML, il vous suffit d'apporter une petite modification à l'élément "body" dans le style> / style> Mots clés. Les étapes dépendent de l'apparence de votre fond d'écran. Apprenez à définir l'arrière-plan de votre site Web sous forme d'animation de couleur unie, d'image, de dégradé ou de couleur.

Avancer d'un pas

Méthode 1 sur 4: Définition d'une couleur d'arrière-plan unie

1. Ouvrez votre fichier HTML dans votre éditeur de texte préféré. Depuis HTML5, l'attribut HTML bgcolor> n'est plus pris en charge. La couleur d'arrière-plan, comme tous les autres aspects de style de votre page, doit être définie avec CSS.
2. Ajouter le style> / style> marque votre document. Toutes les données de style de votre page (y compris la couleur d'arrière-plan) doivent être encodées dans ces balises. As-tu le style> balises déjà indiquées, vous pouvez simplement faire défiler jusqu'à cette partie du fichier.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Tapez l'élément "body" à l'intérieur du style> / style> Mots clés. Tout ce que vous modifiez dans l'élément "body" dans CSS affectera la page entière.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Ajoutez la propriété "background-color" à l'élément "body". Dans ce contexte, une seule orthographe de "couleur" fonctionnera (pas: couleur).

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

5. Placez la couleur d'arrière-plan souhaitée derrière "background-color". Vous pouvez maintenant indiquer le nom d'une couleur (vert, bleu, ed, etc.), utilisez des codes hexadécimaux (hexadécimaux) (ex. #000000 pour le noir, # ff0000 pour le rouge, etc.) ou en saisissant la valeur RVB de la couleur (telle que RVB (255,255,0) pour le jaune). Voici un exemple avec des codes hexadeximaux, rendant l'arrière-plan identique à la bannière wikiHow:

   ! DOCTYPE html> html> tête> style> corps {couleur d'arrière-plan: # 93B874; } / style> / head> body> / body> / html>

   • Blanc: #FFFFFF
   • Rose clair: # FFCCE6
   • Sienne brûlée: #993300
   • Indigo - # 4B0082
   • Violette - # EE82EE
   • Consultez le sélecteur de couleurs HTML de w3schools.com pour trouver les codes hexadécimaux de la couleur souhaitée.
6. Utilisez "background-color" pour appliquer des couleurs d'arrière-plan à d'autres éléments. Tout comme vous définissez l'élément body, vous pouvez utiliser background-color pour définir les arrière-plans d'autres éléments. Placez simplement ces éléments dans le style> / style> avec la propriété background-color.

   ! DOCTYPE html> html> tête> style> corps {couleur d'arrière-plan: # 93B874; } h1 {couleur d'arrière-plan: orange; } p {couleur d'arrière-plan: rgb (255,0,0); } / style> / head> body> h1> Cet en-tête a un fond orange / h1> p> Ce paragraphe a un fond rouge / p> / body> / html>

Méthode 2 sur 4: Utiliser une image comme arrière-plan

1. Ouvrez le fichier HTML dans un éditeur de texte. De nombreuses personnes préfèrent utiliser une image comme arrière-plan de leur site Web. Avec cela, vous pouvez définir un motif, une texture, une photo ou toute autre image comme arrière-plan. À partir de HTML5, tous les arrière-plans doivent être définis avec CSS (feuilles de style en cascade) dans le style> / style> Mots clés.
2. Ajouter le style> / style> balises dans votre fichier HTML. Toutes les données de style de votre page (y compris la couleur d'arrière-plan) doivent être indiquées dans ces balises. As-tu déjà style> balises définies, faites défiler jusqu'à cette partie du fichier.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Tapez l'élément "body" à l'intérieur du style> / style> Mots clés. Tout ce que vous modifiez dans l'élément "body" dans CSS affectera la page entière.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Ajoutez la propriété "background-image" à l'élément "body". Lors de l'ajout de cette propriété, vous aurez besoin du nom de fichier de votre image. Assurez-vous que l'image est enregistrée dans le même dossier que le fichier html (ou ajoutez le chemin complet du fichier sur votre serveur Web).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); couleur d'arrière-plan: # 93B874; } / style> / head> body> / body> / html>

   • C'est une bonne idée d'inclure le code Couleur de l'arrière plan juste au cas où l'image d'arrière-plan ne se chargerait pas.
5. Superposez plusieurs images. Vous pouvez empiler plusieurs images les unes sur les autres. Cela peut être utile si vous avez des images avec des arrière-plans transparents qui se complètent lorsqu'elles sont superposées.

   ! DOCTYPE html> html> head> style> body {image de fond: url ("image1.png"), url ("image2.gif"); couleur d'arrière-plan: # 93B874; } / style> / head> body> / body> / html>

   • La première image est en haut. La deuxième image est en dessous de la première.

Méthode 3 sur 4: créer un arrière-plan dégradé

1. Utilisez CSS pour créer un arrière-plan dégradé. Si vous recherchez quelque chose d'un peu plus stylisé qu'une couleur unie, mais pas aussi chargé qu'une animation en couleur, essayez un arrière-plan dégradé. Les dégradés sont des couleurs qui se transforment en d'autres égalités. Vous pouvez utiliser CSS pour créer et ajuster votre dégradé. Avant de commencer à créer un dégradé de couleurs, vous devez acquérir des connaissances suffisantes sur les bases du formatage d'une page Web avec CSS.
2. Comprenez la syntaxe standard. Lors de la création d'un dégradé, vous aurez besoin de deux informations: le point de départ et l'angle de départ, et les couleurs entre lesquelles la transition se produira. Vous pouvez sélectionner plusieurs couleurs qui se chevauchent toutes et vous pouvez spécifier une direction ou un angle pour le dégradé.

   arrière-plan: gradient linéaire (direction / angle, couleur1, couleur2, couleur3, etc.);

3. Créez un dégradé vertical. Si vous n'indiquez pas de direction, la couleur ira de haut en bas. Différents navigateurs ont différentes versions de la fonction de dégradé, vous devrez donc ajouter différentes versions du code.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Ceci est nécessaire pour garantir que le dégradé couvre toute la page * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: gradient linéaire (# 93B874, # C9DCB9); / * Syntaxe par défaut (doit être le dernier) * / background-color: # 93B874; / * C'est une bonne idée de définir une couleur d'arrière-plan, au cas où le dégradé ne se chargerait pas * /} / style> / head> body> / body> / html>

4. Créez un dégradé avec une direction. L'ajout d'une direction au dégradé vous permet d'ajuster la façon dont la couleur change. Notez que différents navigateurs interpréteront les directions différemment. Ils montreront tous le même dégradé de couleur.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } corps {arrière-plan: -webkit-linear-gradient (gauche, # 93B874, # C9DCB9); / * de gauche à droite * / background: -o-linear-gradient (right, # 93B874, # C9DCB9); / * fin à droite * / background: -moz-linear-gradient (right, # 93B874, # C9DCB9); / * fin à droite * / background: gradient linéaire (à droite, # 93B874, # C9DCB9); / * se déplace vers le côté droit * / background-color: # 93B874; / * c'est une bonne idée de définir une couleur d'arrière-plan, au cas où le dégradé ne se chargerait pas * /} / style> / head> body> / body> / html>

5. Utilisez d'autres propriétés pour ajuster le dégradé. Vous pouvez faire beaucoup plus avec les dégradés.
   • Par exemple, vous pouvez non seulement utiliser plus de deux couleurs, mais également placer un pourcentage derrière chacune. Avec cela, vous pouvez indiquer l'espace disponible pour chaque segment de couleur.

     arrière-plan: gradient linéaire (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Ajoutez de la transparence aux couleurs. Avec cela, vous pouvez estomper les couleurs. Utilisez la même couleur pour passer de la couleur à rien. Vous allez adorer la fonction rgba () doit utiliser pour indiquer la couleur. La valeur finale détermine le degré de transparence: 0 pour opaque et 1 pour transparent.

     arrière-plan: gradient linéaire (à droite, rgba (147,184,116,0), rgba (147,184,116,1));

Méthode 4 sur 4: définir une animation de couleur comme fond d'écran

1. Aller vers style> dans votre code HTML. Si vous trouvez une couleur d'arrière-plan unie mais pas, essayez de changer de couleur d'arrière-plan. À partir de HTML 5, les couleurs d'arrière-plan doivent être définies avec CSS (feuilles de style en cascade). Si vous n'avez jamais défini de couleur d'arrière-plan avec CSS, lisez la section sur la définition d'une couleur d'arrière-plan unie avant d'essayer cette méthode.
2. Ajouter la propriété animation à l'élément "body". Vous devrez ajouter 2 propriétés différentes, car chaque navigateur nécessite un code différent.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infini; animation: changement de couleur des années 60 infini; } / style> / head> body> / body> / html>

   • -webkit-animation la propriété est requise pour les navigateurs basés sur Chrome (Chrome, Opera, Safari). animation est la norme pour tous les autres navigateurs.
   • changement de couleur est ce qu'on appelle l'animation dans cet exemple.
   • Années 60 est la durée (60 secondes) de l'animation / transition. Assurez-vous de le définir à la fois pour le kit Web et la syntaxe par défaut.
   • infini indique que l'animation doit se répéter indéfiniment. Si vous préférez boucler les couleurs puis vous arrêter à la dernière couleur, vous pouvez omettre cette partie.
3. Ajoutez des couleurs à votre animation. Vous allez maintenant utiliser la règle @keyframes pour définir les couleurs d'arrière-plan à parcourir, ainsi que la durée d'affichage de chaque couleur sur la page. Encore une fois, vous devrez ajouter plusieurs encodages pour les différents navigateurs.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infini; animation: changement de couleur des années 60 infini; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Notez que les deux lignes (@ -webkit-keyframes et @keyframes ont les mêmes valeurs pour les couleurs d'arrière-plan et les pourcentages. Il doit rester uniforme afin que l'expérience reste la même pour tous les navigateurs.
   • Les pourcentages (0%, 25%, etc.) représentent la durée totale de l'animation (Années 60). Lorsque la page se charge, l'arrière-plan aura la couleur définie sur 0% et (# 33FFF3). Lorsque 25% ou 60 secondes de l'animation ont été lues, l'arrière-plan passe à # 78281F, et ainsi de suite.
   • Vous pouvez ajuster la durée et les couleurs comme vous le souhaitez.