CSS Achtergrond

CSS achtergrondproperties worden gebruikt om de achtergrondeffecten van een element te definiëren.

In deze hoofdstukken zult u leren over de volgende CSS achtergrondproperties:

  • achtergrondkleur
  • achtergrondafbeelding
  • achtergrondherhaling
  • achtergrondkoppeling
  • achtergrondpositie

CSS achtergrondkleur

achtergrondkleur De property specificeert de achtergrondkleur van het element.

Voorbeeld

De achtergrondkleur van de pagina is ingesteld als volgt:

body {
  achtergrondkleur: lichtblauw;
}

Probeer het zelf

Met CSS worden kleuren meestal op de volgende manier gespecificeerd:

  • Geldige kleurnamen - bijvoorbeeld "rood"
  • Hexadecimale waarden - bijvoorbeeld "#ff0000"
  • RGB-waarden - bijvoorbeeld "rgb(255,0,0)"

Bekijk a.u.b. CSS Kleurwaarde，verkrijg een volledige lijst van mogelijke kleurwaarden.

Andere elementen

U kunt de achtergrondkleur instellen voor elk HTML-element:

Voorbeeld

Hier, <h1>, <p> en <div> elementen zullen verschillende achtergrondkleuren hebben:

h1 {
  achtergrondkleur: groen;
}
div {
  achtergrondkleur: lichtblauw;
}
p {
  achtergrondkleur: geel;
}

Probeer het zelf

Onduidelijkheid / Transparantie

De onduidelijkheidsproperty specifies the opacity/transparency of an element. The range is 0.0 - 1.0. The lower the value, the more transparent it is:

onduidelijkheid 1
onduidelijkheid 0.6
onduidelijkheid 0.3
onduidelijkheid 0.1

Voorbeeld

div {
  achtergrondkleur: groen;
  onduidelijkheid: 0.3;
}

Probeer het zelf

Opmerking:Gebruik onduidelijkheid Wanneer de onduidelijkheidsproperty van een element de achtergrond van het element toevoegt, erfen alle sub-elementen dezelfde onduidelijkheid. Dit kan het lezen van tekst in volledig doorzichtig elementen moeilijk maken.

Gebruik onduidelijkheid van RGBA

Als u de onduidelijkheid van sub-elementen niet wilt toepassen, zoals in het bovenstaande voorbeeld, gebruik dan: RGBA Kleurwaarde. Hieronder volgt een voorbeeld dat de achtergrondkleur instelt in plaats van de onduidelijkheid van de tekst:

100% onduidelijkheid
60% onduidelijkheid
30% ondoorzichtigheid
10% ondoorzichtigheid

U kunt meer te weten komen over CSS Kleuren We hebben in dit hoofdstuk geleerd hoe RGB kan worden gebruikt als kleurwaarde. Naast RGB kan ook de RGB-kleurenwaarde worden gebruikt met alpha Gebruik de kanalen samen (RGBA) - Deze kanaal specificeert de ondoorzichtheid van de kleur.

RGBA-kleurenwaarden worden gespecificeerd als: rgba(rood, groen, blauw, alpha)。alpha De parameter is een getal tussen 0.0 (volledig doorschijnend) en 1.0 (geen doorschijnendheid).

Tip:U kunt meer weten over RGBA-kleuren in onze CSS Kleuren In dit hoofdstuk hebben we meer geleerd over RGBA-kleuren.

Voorbeeld

div {
  background: rgba(0, 128, 0, 0.3) /* 30% ondoorzichtig groene achtergrond */
}

Probeer het zelf