Problemer med å vise bakgrunnsfarge for Div Elements

Webdesignere bruker en kombinasjon av HTML markup og Cascading Style Sheets kode for å angi bakgrunnsfarger. Ved hjelp av CSS, kan du instruere brukerens nettleser for å vise en bestemt bakgrunnsfarge for noen HTML-element, inkludert divs. Men utviklerne ofte støter på problemer i enkelte eller alle nettlesere når implementere CSS egenskaper. Hvis en bakgrunnsfarge for en div element ikke vises riktig, må du kanskje vurdere en rekke mulige årsaker.

element Dimensjoner

Avhengig av HTML markup på siden, kan en div element ikke gjengi i nettleseren med de forventede dimensjoner. Standard scenario er for elementet for å strekke seg for å få plass til dets innhold. Selve plassen okkupert av en div element er også påvirket av eventuelle CSS flyt egenskaper som brukes på det og elementene rundt det. Hvis en div element ikke fyller den plassen du trenger den til, kan du legge til en klar eiendom til sin CSS-kode, som følger:
div {
klar: begge;
}

Alternativt kan du angi faste dimensjoner for div hvis denne passer din side design:
div {
width: 500px;
height: 600px;
}

Hvis div ordnede element har faste dimensjoner, kan du bruke relative verdier for div selv:
div {
width: 100%:
høyde: 95%;
}

barn Elements

Hvis en div element inneholder ordnede elementer, de kan påvirke visningen av en bakgrunnsfarge hvis de også har bakgrunn egenskaper satt. For å løse dette, kan du enten fjerne bakgrunns egenskaper fra de underordnede div-elementer eller flytte elementene seg fra innsiden av div til en annen del av siden. Dersom foreldre eller barn divs ha bakgrunns egenskaper som indikerer bilder og farge, kan dette også påvirke visningen. Følgende eksempel CSS demonstrerer:
div {background: # 000000 url ( "bgpic.jpg") no-repeat;}

I dette tilfellet vil den sorte bakgrunnsfargen vises bare på de områder av div som ikke dekkes av bildet.

CSS identifikatorer

Problemer med å vise bakgrunnsfarger kan være forårsaket av feil bruk av CSS identifikatorer. CSS-kode kan identifisere div-elementer etter type, som følger:
div {background-color: # 330000;}

Alternativt kan unike elementer identifiseres ved hjelp av sine ID-attributter, som følger:

header {background-color: # 000033;}

Dette vil identifisere følgende element:
<Div id = "header"> Side header </ div>

CSS kan også bruke klasse attributter for å identifisere grupper av elementer på en side:
div.info {background-color: # 003300;}

Dette identifiserer elementer med følgende kode:
<Div class = "info"> Info element </ div>

CSS Colors

Hvis CSS-koden ikke inneholder korrekt formaterte fargeverdier, kan dette hindre bakgrunnsfarger vises riktig. CSS erklæringer kan bruke heksadesimale fargekoder, som i følgende eksempel:
background-color: # FF0000;

Dette representerer en lys rød farge. Alternativt kan CSS inkluderer RGB - Red, Green, Blue - verdier, som følger:
background-color: rgb (255,0,0);

Dette er RGB tilsvarer lys rød farge. CSS kan også representere visse farger ved hjelp av navn, som følger:
background-color: red;

Hvis en div element vises uten en bakgrunnsfarge som vises i det hele tatt, eller med feil farge, er det lurt å sjekke fargeverdiene oppført i CSS-koden. Noen nettsteder bruker RGBA verdier, som inkluderer en alfa åpenhet indikator, eller HSL - fargetone, metning, letthet - verdier, selv om disse er mindre vanlig.