CSS -kleurzoekwoorden
transparentOp deze pagina worden de , currentcolor, en
inherittrefwoorden uitgelegd .
Het transparante trefwoord
Het transparenttrefwoord wordt gebruikt om een kleur transparant te maken. Dit wordt vaak gebruikt om een transparante achtergrondkleur voor een element te maken.
Voorbeeld
Hier is de achtergrondkleur van het <div>-element volledig transparant en wordt de achtergrondafbeelding zichtbaar:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Opmerking: het transparent
sleutelwoord is gelijk aan rgba(0,0,0,0). RGBA-kleurwaarden zijn een uitbreiding van RGB-kleurwaarden met een alfakanaal - dat de dekking voor een kleur specificeert. Lees meer in ons CSS RGB- hoofdstuk en in ons CSS- kleurenhoofdstuk.
Het trefwoord van de huidige kleur
Het currentcolorsleutelwoord is als een variabele die de huidige waarde van de kleureigenschap van een element bevat.
Dit trefwoord kan handig zijn als u wilt dat een specifieke kleur consistent is in een element of een pagina.
Voorbeeld
In dit voorbeeld is de randkleur van het <div>-element blauw, omdat de tekstkleur van het <div>-element blauw is:
div {
color: blue;
border: 10px solid currentcolor;
}
Voorbeeld
In dit voorbeeld is de achtergrondkleur van de <div> ingesteld op de huidige kleurwaarde van het body-element:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Voorbeeld
In dit voorbeeld is de randkleur en schaduwkleur van <div> ingesteld op de huidige kleurwaarde van het body-element:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Het overerven trefwoord
Het inheritsleutelwoord geeft aan dat een eigenschap zijn waarde moet erven van het bovenliggende element.
Het inherittrefwoord kan worden gebruikt voor elke CSS-eigenschap en voor elk HTML-element.
Voorbeeld
In dit voorbeeld worden de randinstellingen van <span> overgenomen van het bovenliggende element:
div {
border: 2px solid red;
}
span {
border:
inherit;
}