CSS Kleurwoorden

Dit hoofdstuk zal uitleggen transparent、currentcolor en inherit sleutel.

transparent-sleutel

transparent Deze sleutel wordt gebruikt om kleuren transparant te maken. Dit wordt meestal gebruikt om een element een transparante achtergrondkleur in te stellen.

Voorbeeld

Hier zal de achtergrondkleur van het <div>-element volledig transparant zijn en het achtergrondbeeld zal worden weergegeven:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

Probeer het zelf

Opmerking:transparent Deze sleutel is equivalent aan rgba(0,0,0,0)RGBA-kleurenwaarden zijn een uitbreiding van RGB-kleurenwaarden, met een alpha-kanaal - dit specificeert de ondoorzichtigheid van de kleur. Meer informatie vind je in onze CSS RGB Hoofdstuk en CSS Kleuren Hoofdstuk.

currentcolor-sleutel

currentcolor Deze sleutel is vergelijkbaar met een variabele, die de huidige waarde van de color-eigenschap van het element opslaat.

Als je een specifieke kleur consistent wilt houden in een element of op een pagina, is deze sleutel zeer nuttig.

Voorbeeld

In dit voorbeeld zal de randkleur van het <div>-element blauw zijn, omdat de tekstkleur van het <div>-element blauw is:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Probeer het zelf

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;
}

Probeer het zelf

Voorbeeld

In dit voorbeeld, de randkleur en schaduwkleur van <div> worden ingesteld op de huidige kleurwaarde van het body-element:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Probeer het zelf

inherit sleutelwoord

inherit Het sleutelwoord specificeert dat de waarde van de eigenschap moet worden geërfd van de ouder-element.

inherit Sleutelwoorden kunnen worden gebruikt voor elke CSS-eigenschap en kunnen worden gebruikt voor elk HTML-element.

Voorbeeld

In dit voorbeeld, de randinstelling van <span> wordt geërfd van de ouder-element:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

Probeer het zelf