De achtergrondkleur wijzigen met CSS

De achtergrondkleur wijzigen met CSS

Een van de meest opwindende momenten in de carrière van een beginnende front-end ontwikkelaar is leren hoe je de achtergrondkleur van een webpagina kunt veranderen.





Werken met HTML is geweldig en zo, maar met slechts een paar regels CSS kun je je pagina's en je programmeerreis tot leven laten komen.



Deze handleiding behandelt alles wat u moet weten over het wijzigen van de achtergrondkleur met CSS.





Aan de slag

Laten we een beetje voorbereidend werk uitschakelen.

hoe privévideo's van Facebook te downloaden

Opmerking : Ik raad aan om te gebruiken Visual Studio-code met de Live Server-extensie om wijzigingen in realtime te bekijken terwijl u de HTML en CSS bijwerkt.



  1. Maak een map voor de bestanden van uw project.
  2. Creëer een index.html bestand om uw HTML te huisvesten. Je kunt boilerplate-code gebruiken, of gewoon wat instellen , , en labels.
  3. Maak een stijlen.css bestand voor uw CSS.
  4. Koppel uw CSS-bestand aan de HTML door te plaatsen binnen in de labels.

Nu ben je klaar om aan de slag te gaan met het bewerken van de CSS.

Verwant: Hoe maak je een Boilerplate-website?



De achtergrondkleur wijzigen met CSS

De eenvoudigste manier om de achtergrondkleur te wijzigen, is door de lichaam label. Bewerk vervolgens de Achtergrond kleur eigendom. U kunt kleurcodes vinden door de Google Color Picker-browserextensie te zoeken en te gebruiken

body {
background-color: rgb(191, 214, 255);
}

Deze code verandert de achtergrond in een mooi lichtblauw.



De Achtergrond kleur eigenschap accepteert kleuren in zes verschillende vormen:

  • naam : lichthemelsblauw; (voor een nauwkeurige benadering)
  • hexadecimale code : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); waar tot is alfa (ondoorzichtigheid)
  • HSL : hsl (218°, 100%, 87%);
  • HSLA : hsla (218°, 100%, 87%, 1); waar tot is alfa (ondoorzichtigheid)

Gebruik de steno achtergrond eigendom in plaats van Achtergrond kleur om extra code te knippen. Met deze methode kunt u de achtergrondkleur van elk HTML-element wijzigen.

Maak een element en geef het een klasse - in dit geval is de klasse paneel . Zet zijn hoogte en breedte eigenschappen in CSS. Selecteer het element in CSS en kleur weg.

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;
}

Hier zie je de lichaam achtergrond eigendom is onafhankelijk van de stijl gestyled .paneel achtergrond eigendom.

De eigenschap background accepteert ook verlopen:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Hoe de achtergrondafbeelding in CSS te wijzigen

Wat als u wilt dat de achtergrond een afbeelding is in plaats van een effen kleur of verloop? de steno achtergrond eigendom is een bekende vriend.

Zorg ervoor dat de afbeelding zich in dezelfde map bevindt als uw HTML- en CSS-bestanden. Anders moet u het bestandspad tussen haakjes gebruiken in plaats van alleen de naam:

body {
background: url(leaves-and-trees.jpg)
}

Wauw! Het lijkt erop dat de afbeelding veel te veel is ingezoomd. Je kunt dat oplossen met de achtergrondformaat eigendom.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Om de steno te gebruiken achtergrond eigendom in combinatie met de achtergrondformaat eigendom Hoes , moet u ook specificeren achtergrondpositie eigenschappen en scheid de waarden met een backslash (zelfs als het standaard positionele waarden zijn zoals linksboven .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Daar ga je! Een achtergrondafbeelding van de juiste grootte in één regel CSS.

Lees verder: Een achtergrondafbeelding instellen in CSS

Opmerking : Pas op voor het opnemen van grote achtergrondafbeeldingen die veel opslagruimte in beslag nemen. Deze kunnen moeilijk te laden zijn op mobiel, waar je alle twee seconden hebt om gebruikers een reden te geven om op de pagina te blijven.

Verbeter je CSS-spel met CSS-boxschaduw

Voor een ontwikkelaar zoals jij zijn de eigenschappen voor achtergrondkleur en achtergrondafbeelding oud nieuws. Gelukkig valt er altijd iets nieuws te leren.

Probeer je boxes een boost te geven met CSS box-shadow. Uw HTML-elementen hebben er nog nooit zo goed uitgezien!

Deel Deel Tweeten E-mail Hoe CSS box-shadow te gebruiken: 13 trucs en voorbeelden

Flauwe dozen zien er saai uit. Verfraai ze met het CSS-box-schaduweffect!

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • Webontwikkeling
  • Webdesign
  • CSS
Over de auteur Marcus Mears III(26 artikelen gepubliceerd)

Marcus is een levenslange technologieliefhebber en schrijver-editor bij MUO. Hij begon zijn freelance schrijfcarrière in 2020, waarbij hij zich bezighield met trending tech, gadgets, apps en software. Hij studeerde computerwetenschappen aan de universiteit met een focus op front-end webontwikkeling.

Meer van Marcus Mears III

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren