CSS Baggrund

CSS-baggrundsegenskaber bruges til at definere elementets baggrundseffekt.

I disse kapitler vil du lære om følgende CSS-baggrundsegenskaber:

  • baggrundsfarve
  • baggrundsbillede
  • baggrundsgentagelse
  • baggrundsfiksering
  • baggrundsposition

CSS baggrundsfarve

baggrundsfarve egenskab specificerer elementets baggrundsfarve.

Eksempel

Baggrundsfarven for siden er indstillet som følger:

body {
  baggrundsfarve: lysblå;
}

Prøv det selv

Med CSS specificeres farver normalt på følgende måde:

  • Gyldige farvenavne - f.eks. "red"
  • Hexadecimale værdier - f.eks. "#ff0000"
  • RGB-værdier - f.eks. "rgb(255,0,0)"

Se CSS farveværdier，få en fuldstændig liste over mulige farveværdier.

Andre elementer

Du kan indstille baggrundsfarve for ethvert HTML-element:

Eksempel

Her vil <h1>, <p> og <div>-elementer have forskellige baggrundsfarver:

h1 {
  baggrundsfarve: grøn;
}
div {
  baggrundsfarve: lysblå;
}
p {
  baggrundsfarve: guld;
}

Prøv det selv

Gennemsigtighed / Transparenthed

gennemsigtighedsegenskaben specificerer elementets gennemsigtighed/transparenthed. Værdierne varierer fra 0.0 til 1.0. Jo lavere værdien er, jo mere gennemsigtig er elementet:

gennemsigtighed 1
gennemsigtighed 0.6
gennemsigtighed 0.3
gennemsigtighed 0.1

Eksempel

div {
  baggrundsfarve: grøn;
  gennemsigtighed: 0.3;
}

Prøv det selv

Bemærk:Brug gennemsigtighed Når du tilføjer gennemsigtighed til elementets baggrund via denne egenskab, arver alle underelementer den samme gennemsigtighed. Dette kan gøre teksten i fuldstændigt gennemsigtige elementer svær at læse.

gennemsigtighed med RGBA

Hvis du ikke ønsker at anvende gennemsigtighed på underelementer, f.eks. i ovenstående eksempel, skal du bruge RGBA Farveværdi. Her er et eksempel, der indstiller baggrundsfarve i stedet for tekstens gennemsigtighed:

100% gennemsigtighed
60% gennemsigtighed
30% gennemsigtighed
10% gennemsigtighed

fra vores CSS Farver i dette kapitel lærte vi, at vi kan bruge RGB som farveværdier. Udover RGB kan RGB-farveværdier kombineres med alpha kanaler bruges sammen (RGBA) - denne kanal specificerer farvens gennemsigtighed.

RGBA farveværdier specificeres som: rgba(red, green, blue, alpha)。alpha Parametrene er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (ikke gennemsigtig).

Tip:Du kan finde mere information om RGBA farver i vores CSS Farver I dette kapitel lærte vi mere om RGBA farver.

Eksempel

div {
  background: rgba(0, 128, 0, 0.3) /* 30% gennemsigtig grøn baggrund */
}

Prøv det selv