CSS agtergronde
Die CSS-agtergrondeienskappe word gebruik om agtergrondeffekte vir elemente by te voeg.
In hierdie hoofstukke sal jy leer oor die volgende CSS-agtergrondeienskappe:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(kortskrif eiendom)
CSS agtergrondkleur
Die background-coloreienskap spesifiseer die agtergrondkleur van 'n element.
Voorbeeld
Die agtergrondkleur van 'n bladsy is soos volg gestel:
body {
background-color: lightblue;
}
Met CSS word 'n kleur meestal gespesifiseer deur:
- 'n geldige kleurnaam - soos "rooi"
- 'n HEX-waarde - soos "#ff0000"
- 'n RGB-waarde - soos "rgb(255,0,0)"
Kyk na CSS -kleurwaardes vir 'n volledige lys van moontlike kleurwaardes.
Ander elemente
Jy kan die agtergrondkleur vir enige HTML-elemente stel:
Voorbeeld
Hier sal die <h1>-, <p>- en <div>-elemente verskillende agtergrondkleure hê:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Deursigtigheid / Deursigtigheid
Die opacityeienskap spesifiseer die ondeursigtigheid/deursigtigheid van 'n element. Dit kan 'n waarde van 0.0 - 1.0 neem. Hoe laer waarde, hoe meer deursigtig:
ondeursigtigheid 1
ondeursigtigheid 0.6
ondeursigtigheid 0.3
ondeursigtigheid 0.1
Voorbeeld
div {
background-color: green;
opacity: 0.3;
}
Let wel: Wanneer die opacityeienskap gebruik word om deursigtigheid by die agtergrond van 'n element te voeg, erf al sy onderliggende elemente dieselfde deursigtigheid. Dit kan die teks binne 'n ten volle deursigtige element moeilik maak om te lees.
Deursigtigheid met behulp van RGBA
As jy nie ondeursigtigheid op kinderelemente wil toepas nie, soos in ons voorbeeld hierbo, gebruik RGBA -kleurwaardes. Die volgende voorbeeld stel die ondeursigtigheid vir die agtergrondkleur en nie die teks nie:
100% ondeursigtigheid
60% ondeursigtigheid
30% ondeursigtigheid
10% ondeursigtigheid
Jy het uit ons CSS Kleure Hoofstuk geleer dat jy RGB as 'n kleurwaarde kan gebruik. Benewens RGB, kan jy 'n RGB-kleurwaarde met 'n alfakanaal (RGB A ) gebruik - wat die ondeursigtigheid vir 'n kleur spesifiseer.
'n RGBA-kleurwaarde word gespesifiseer met: rgba(rooi, groen, blou, alfa ). Die alfa- parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).
Wenk: Jy sal meer leer oor RGBA-kleure in ons CSS-kleure-hoofstuk .
Voorbeeld
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}