Home-theater-designers
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.
Installez-vous
Éliminons un peu de travail préliminaire.
votre pc a rencontré un problème et doit redémarrer
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.
- Créez un dossier pour les fichiers de votre projet.
- Créé un index.html fichier pour héberger votre HTML. Vous pouvez utiliser du code passe-partout, ou simplement configurer certains , , et Mots clés.
- Créer un styles.css fichier pour votre CSS.
- Liez votre fichier CSS avec le HTML en plaçant à l'intérieur de Mots clés.
Vous êtes maintenant prêt à commencer à éditer le CSS.
En rapport: Comment créer un site Web passe-partout
Comment changer la couleur d'arrière-plan avec CSS
Le moyen le plus simple de changer la couleur d'arrière-plan est de cibler le corps étiqueter. Ensuite, modifiez le Couleur de l'arrière plan biens. Vous pouvez trouver des codes de couleur en recherchant et en utilisant l'extension de navigateur Google Color Picker
body {
background-color: rgb(191, 214, 255);
}
Ce code change l'arrière-plan en un joli bleu clair.
Les Couleur de l'arrière plan La propriété accepte les couleurs sous six formes différentes :
- Nom : bleu ciel clair; (pour une approximation proche)
- code hexadécimal : # bfd6ff;
- RVB : rvb(191, 214, 255);
- rgba : rgba (191, 214, 255, 1); où à est alpha (opacité)
- LGV : hsl (218°, 100 %, 87 %) ;
- HSLA : hsla (218°, 100 %, 87 %, 1); où à est alpha (opacité)
Utilisez le raccourci Contexte propriété à la place de Couleur de l'arrière plan pour couper du 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 . Définir son la taille et largeur propriétés en CSS. Sélectionnez l'élément en CSS et colorez-le.
body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}
Ici vous pouvez voir le corps Contexte la propriété est stylisée indépendamment de la .panneau Contexte biens.
La propriété background accepte également les dégradés :
body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}
Comment changer l'image d'arrière-plan en CSS
Que faire 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 :
body {
background: url(leaves-and-trees.jpg)
}
Ouah ! On dirait que l'image est trop agrandie. Vous pouvez corriger cela avec le taille de l'arrière-plan biens.
body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}
Pour utiliser le raccourci Contexte propriété conjointement avec le taille de l'arrière-plan biens couverture , vous devez également spécifier position-arrière-plan propriétés et séparez les valeurs par une barre oblique inverse (même s'il s'agit de valeurs positionnelles par défaut telles que en haut à gauche .)
body {
background: url(leaves-and-trees.jpg) top left / cover;
}
Voilà! Une image de fond correctement dimensionnée dans une ligne de CSS.
Lire la suite: Comment définir une image d'arrière-plan en CSS
Noter : Méfiez-vous des grandes images d'arrière-plan qui occupent beaucoup d'espace de stockage. Ceux-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 comme 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 !
Partager Partager Tweeter E-mail Comment utiliser CSS box-shadow : 13 astuces et exemplesLes boîtes fades ont l'air ennuyeuses. Embellissez-les avec l'effet CSS box-shadow !
Lire la suite Rubriques connexes- La programmation
- Développement web
- Création de sites web
- CSS
Marcus est un passionné de technologie depuis toujours et rédacteur en chef à MUO. Il s'est lancé dans sa carrière d'écrivain indépendant en 2020, couvrant les tendances technologiques, les gadgets, les applications et les logiciels. Il a étudié l'informatique à l'université en mettant l'accent sur le développement Web front-end.
Plus de Marcus Mears IIIAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner