Comment changer la couleur d’arrière-plan avec CSS

L’un des moments les plus excitants de la carrière de tout développeur front-end en herbe est d’apprendre à changer la couleur d’arrière-plan d’une page Web.

Travailler avec HTML est génial et tout, mais avec seulement quelques lignes de CSS, vous pouvez donner vie à vos pages et à votre parcours de programmation.

Ce guide couvrira tout ce que vous devez savoir sur la façon de changer la couleur d’arrière-plan avec CSS.

Préparez-vous

Faisons un petit travail préliminaire.

Noter : Je recommande d’utiliser Code Visual Studio avec le Extension de serveur en direct pour afficher les modifications en temps réel lorsque vous mettez à jour le HTML et le CSS.

  1. Créez un dossier pour les fichiers de votre projet.
  2. Créé un index.html fichier pour héberger votre code HTML. Vous pouvez utiliser du code passe-partout ou simplement en configurer , , et Mots clés.
  3. Créer un styles.css fichier pour votre CSS.
  4. Liez votre fichier CSS avec le HTML en plaçant à l’intérieur de Mots clés.
  5. Vous êtes maintenant prêt à commencer à modifier le CSS.

    Comment changer la couleur d’arrière-plan avec CSS

    Le moyen le plus simple de modifier la couleur d’arrière-plan consiste à cibler le corps étiqueter. Ensuite, éditez le Couleur de l’arrière plan propriété. Vous pouvez trouver des codes de couleur en recherchant et en utilisant l’extension de navigateur Google Color Picker

    Ce code change le fond en un joli bleu clair.

    css fond bleu clair

    le Couleur de l’arrière plan La propriété accepte les couleurs sous six formes différentes :

    • Nom : bleu ciel clair ; (pour une bonne approximation)
    • code hexadécimal : #bfd6ff;
    • RVB : RVB(191, 214, 255);
    • RVB : RVB(191, 214, 255, 1); une est alpha (opacité)
    • LGV : hsl(218°, 100%, 87%);
    • HSLA : hsla(218°, 100%, 87%, 1); une est alpha (opacité)

    Utilisez la sténographie Contexte propriété à la place de Couleur de l’arrière plan pour couper le code supplémentaire. Vous pouvez modifier la couleur d’arrière-plan de n’importe quel élément HTML à l’aide de cette méthode.

    Créer un

    élément et donnez-lui une classe – dans ce cas, la classe est panneau . Réglez son la taille et largeur propriétés en CSS. Sélectionnez l’élément en CSS et colorez-le.

    Ici vous pouvez voir le corps Contexte la propriété est stylisée indépendamment de la .panneau Contexte propriété.

    css fond bleu clair avec panneau rouge

    La propriété background accepte également les dégradés :

    fond dégradé css avec panneau

    Comment changer l’image d’arrière-plan en CSS

    Et si vous voulez que l’arrière-plan soit une image plutôt qu’une couleur unie ou un dégradé ? La sténographie Contexte la propriété est un ami familier.

    Assurez-vous que l’image se trouve dans le même dossier que vos fichiers HTML et CSS. Sinon, vous devrez utiliser le chemin du fichier entre parenthèses plutôt que simplement le nom :

    fond d'arbres css zoomé

    Ouah ! On dirait que l’image est beaucoup trop agrandie. Vous pouvez résoudre ce problème avec le taille d’arrière-plan propriété.

    Pour utiliser la sténographie Contexte propriété en collaboration avec le taille d’arrière-plan propriété couverture , vous devez également spécifier position d’arrière-plan properties et séparez les valeurs par une barre oblique inverse(même s’il s’agit de valeurs de position par défaut telles que en haut à gauche .)

    fond d'arbres css correctement dimensionné

    Voilà! Une image d’arrière-plan correctement dimensionnée sur une seule ligne de CSS.

    Noter : Méfiez-vous des grandes images d’arrière-plan qui occupent beaucoup d’espace de stockage. Celles-ci peuvent être difficiles à charger sur mobile, où vous disposez de deux secondes pour donner aux utilisateurs une raison de rester sur la page.

    Améliorez votre jeu CSS avec CSS box-shadow

    Pour un développeur tel que vous, les propriétés background-color et background-image sont de vieilles nouvelles. Heureusement, il y a toujours quelque chose de nouveau à apprendre.

    Essayez de donner un coup de pouce à vos boîtes avec CSS box-shadow. Vos éléments HTML n’ont jamais été aussi beaux !

    Cliquez pour évaluer cet article !
    [Total: Moyenne : ]
Voir aussi :  Comment utiliser Crontab pour automatiser les tâches répétitives sous Linux

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *