HTML-baggrundsfarvevejledning - Sådan ændres en div baggrundsfarve, forklaret med kodeeksempler

En af de mest almindelige ting, du muligvis skal gøre som webudvikler, er at ændre baggrundsfarven på et HTML-element. Men det kan være forvirrende at gøre, hvis du ikke forstår, hvordan du bruger CSS- background-colorejendommen.

I artiklen diskuterer vi

  • standardbaggrundsfarveværdien for et HTML-element
  • hvordan man ændrer baggrundsfarven på en div, hvilket er et meget almindeligt element
  • hvilke dele af CSS-boksmodellen, der er berørt af background-colorejendommen, og
  • de forskellige værdier, denne ejendom kan tage.

Standard baggrundsfarve på et element

Standardbaggrundsfarven på en div er transparent. Så hvis du ikke angiver baggrundsfarven på en div, vises den for dets overordnede element.

Ændring af baggrundsfarven på en Div

I dette eksempel ændrer vi baggrundsfarverne for de følgende divs.

 I love HTML I love CSS I love JavaScript 

Uden nogen styling oversættes dette visuelt til følgende.

Lad os ændre divs baggrundsfarve ved at tilføje stilarter til klasserne. Du kan følge med ved at prøve eksemplerne i en HTML-fil.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Dette vil resultere i følgende:

Fedt nok! Vi har med succes ændret baggrundsfarven på denne div. Lad os derefter få mere at vide om denne ejendom. Lad os se, hvordan egenskaben baggrundsfarve påvirker dele af CSS-box-modellen.

Baggrundsfarve og CSS Box Model

I henhold til CSS-boksmodellen kan alle HTML-elementer modelleres som rektangulære felter. Hver kasse består af 4 dele som vist i nedenstående diagram.

Du kan læse om boksmodellen, hvis du ikke er fortrolig med den. Spørgsmålet er, hvilken del af kassemodellen påvirkes, når du ændrer baggrundsfarven på en div? Det enkle svar er polstringsområdet og indholdsområdet. Lad os bekræfte dette ved hjælp af et eksempel.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Dette vil resultere i:

Fra eksemplet ovenfor kan vi se, at marginområdet og grænseområdet ikke påvirkes af ændringen i baggrundsfarve. Vi kan ændre farven på grænsen ved hjælp af grænsefarveegenskaben. Marginområdet forbliver gennemsigtigt og afspejler baggrundsfarven på den overordnede container.

Lad os endelig diskutere de værdier, som egenskaben baggrundsfarve kan tage.

Baggrundsfarveværdier

Ligesom farveegenskaben kan egenskaben baggrundsfarve tage seks forskellige værdier. Lad os overveje de tre mest almindelige værdier med et eksempel. I eksemplet indstiller vi baggrundsfarven på div til rød med forskellige værdier.

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Bemærk, at de alle har samme baggrundsfarve.

Andre værdier, som background-colorejendommen kan tage, inkluderer HSL-værdi, specielle søgeordsværdier og globale værdier. Her er eksempler på hver af dem.

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Du kan læse mere om hver af disse værdier her.

Ekstra note

Når du indstiller baggrundsfarven på et element, er det vigtigt at sikre, at kontrastforholdet mellem baggrundsfarven og farven på teksten, det indeholder, er højt nok. Dette er for at sikre, at personer med nedsat syn let kan læse teksten.

Overvej disse to divs.

Kontrasten mellem baggrundsfarven på første div og farven på teksten er ikke høj nok til, at alle kan se. Så medmindre du er den eneste, der bruger det websted, du bygger, og du har meget godt syn, bør du undgå sådanne farvekombinationer.

Den anden div har et meget bedre kontrastforhold mellem baggrundsfarven og farven på teksten. Således er det mere tilgængeligt og tydeligere for folk at læse.

Konklusion

I denne artikel så vi, hvordan du kan ændre baggrundsfarven på en div. Vi diskuterede også, hvilke dele af CSS-boksmodellen der er påvirket af ændringen i baggrundsfarve. Endelig diskuterede vi de værdier, som baggrundsfarveegenskaben kan tage.

Jeg håber, du fandt denne artikel nyttig. Tak for læsningen.