CSS- achtergronden
De CSS-achtergrondeigenschappen worden gebruikt om achtergrondeffecten voor elementen toe te voegen.
In deze hoofdstukken leert u over de volgende CSS-achtergrondeigenschappen:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(steno eigenschap)
CSS achtergrondkleur
De background-coloreigenschap specificeert de achtergrondkleur van een element.
Voorbeeld
De achtergrondkleur van een pagina wordt als volgt ingesteld:
body {
background-color: lightblue;
}
Met CSS wordt een kleur meestal gespecificeerd door:
- een geldige kleurnaam - zoals "rood"
- een HEX-waarde - zoals "#ff0000"
- een RGB-waarde - zoals "rgb(255,0,0)"
Kijk bij CSS -kleurwaarden voor een volledige lijst met mogelijke kleurwaarden.
Andere elementen
U kunt de achtergrondkleur voor alle HTML-elementen instellen:
Voorbeeld
Hier hebben de elementen <h1>, <p> en <div> verschillende achtergrondkleuren:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Dekking / Transparantie
De opacityeigenschap specificeert de dekking/transparantie van een element. Het kan een waarde aannemen van 0,0 - 1,0. Hoe lager de waarde, hoe transparanter:
dekking 1
dekking 0.6
dekking 0.3
dekking 0.1
Voorbeeld
div {
background-color: green;
opacity: 0.3;
}
Opmerking: wanneer u de opacityeigenschap gebruikt om transparantie aan de achtergrond van een element toe te voegen, nemen alle onderliggende elementen dezelfde transparantie over. Dit kan de tekst in een volledig transparant element moeilijk leesbaar maken.
Transparantie met RGBA
Als u geen dekking wilt toepassen op onderliggende elementen, zoals in ons voorbeeld hierboven, gebruikt u RGBA -kleurwaarden. In het volgende voorbeeld wordt de dekking voor de achtergrondkleur ingesteld en niet voor de tekst:
100% dekking
60% dekking
30% dekking
10% dekking
Je hebt uit ons CSS -kleurenhoofdstuk geleerd dat je RGB als kleurwaarde kunt gebruiken. Naast RGB kunt u een RGB-kleurwaarde gebruiken met een alfakanaal (RGB A ) - dat de dekking voor een kleur specificeert.
Een RGBA-kleurwaarde wordt opgegeven met: rgba(rood, groen, blauw, alfa ). De alfaparameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig).
Tip: je leert meer over RGBA-kleuren in ons hoofdstuk CSS-kleuren .
Voorbeeld
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}