CSS bakgrund

CSS-bakgrundsegenskaper används för att definiera bakgrundseffekterna för element.

I dessa kapitel kommer du att lära dig följande CSS-bakgrundsegenskaper:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color Attributet specificerar elementets bakgrundsfärg.

Exempel

Bakgrundsfärgen för sidan är inställd enligt följande:

body {
  background-color: ljusblå;
}

Prova själv

Genom CSS specificeras färgen vanligtvis på följande sätt:

  • Giltiga färgnamn - till exempel "red"
  • Hexadecimala värden - till exempel "#ff0000"
  • RGB-värden - till exempel "rgb(255,0,0)"

Se till CSS färgvärden，för att få en fullständig lista över möjliga färgvärden.

Andra element

Du kan sätta bakgrundsfärg för alla HTML-element:

Exempel

Här kommer <h1>, <p> och <div>-elementen att ha olika bakgrundsfärger:

h1 {
  background-color: green;
}
div {
  background-color: ljusblå;
}
p {
  background-color: yellow;
}

Prova själv

Opacitet / Throughput

Opacitetsattributet specificerar elementets opacitet/throughput. Värdet kan vara mellan 0.0 och 1.0. Ju lägre värdet, desto mer genomskinlig:

opacitet 1
opacitet 0.6
opacitet 0.3
opacitet 0.1

Exempel

div {
  background-color: green;
  opacitet: 0.3;
}

Prova själv

Observera:Använd opacitet När du tillämpar opacitetsattributet på en elementets bakgrund, kommer alla dess underkomponenter att arbeta med samma opacitet. Detta kan göra det svårt att läsa text inom helt genomskinliga element.

Använd RGBA för opacitet

Om du inte vill tillämpa opacitet på underkomponenter, till exempel i föregående exempel, använd RGBA Färgvärden. I följande exempel ställs bakgrundsfärgen in i stället för textens opacitet:

100% opacitet
60% opacitet
30% genomsiktighet
10% genomsiktighet

från vår CSS färger i detta kapitel lärde vi oss att använda RGB som färgvärden. Förutom RGB kan du också använda RGB-färgvärden tillsammans med alpha kanaler används tillsammans (RGBA) - denna kanal specificerar färgens genomsiktighet.

RGBA-färgvärden specificeras som: rgba(red, green, blue, alpha)。alpha Parametrarna är siffror mellan 0.0 (fullt genomskinlig) och 1.0 (inte genomskinlig).

Tips:Du kan hitta mer information om RGBA-färger i vår CSS färger Lär dig mer om RGBA-färger i detta kapitel.

Exempel

div {
  background: rgba(0, 128, 0, 0.3) /* 30% genomsiktlig grön bakgrund */
}

Prova själv