CSS -Farbschlüsselwörter
Auf dieser Seite werden die Schlüsselwörter transparent, currentcolor, und erklärt.
inherit
Das transparente Schlüsselwort
Das transparentSchlüsselwort wird verwendet, um eine Farbe transparent zu machen. Dies wird oft verwendet, um eine transparente Hintergrundfarbe für ein Element zu erstellen.
Beispiel
Hier ist die Hintergrundfarbe des <div>-Elements vollständig transparent und das Hintergrundbild wird durchscheinen:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
Hinweis: Das transparent
Schlüsselwort entspricht rgba(0,0,0,0). RGBA-Farbwerte sind eine Erweiterung von RGB-Farbwerten mit einem Alphakanal, der die Deckkraft einer Farbe angibt. Lesen Sie mehr in unserem CSS RGB- Kapitel und in unserem CSS-Farben- Kapitel.
Das Schlüsselwort currentcolor
Das currentcolorSchlüsselwort ist wie eine Variable, die den aktuellen Wert der Farbeigenschaft eines Elements enthält.
Dieses Schlüsselwort kann nützlich sein, wenn Sie möchten, dass eine bestimmte Farbe in einem Element oder einer Seite konsistent ist.
Beispiel
In diesem Beispiel ist die Rahmenfarbe des <div>-Elements blau, da die Textfarbe des <div>-Elements blau ist:
div {
color: blue;
border: 10px solid currentcolor;
}
Beispiel
In diesem Beispiel wird die Hintergrundfarbe von <div> auf den aktuellen Farbwert des body-Elements gesetzt:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
Beispiel
In diesem Beispiel wird die Rahmen- und Schattenfarbe von <div> auf den aktuellen Farbwert des body-Elements gesetzt:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
Das inherit-Schlüsselwort
Das inheritSchlüsselwort gibt an, dass eine Eigenschaft ihren Wert von ihrem übergeordneten Element erben soll.
Das inheritSchlüsselwort kann für jede CSS-Eigenschaft und für jedes HTML-Element verwendet werden.
Beispiel
In diesem Beispiel werden die Rahmeneinstellungen von <span> vom übergeordneten Element geerbt:
div {
border: 2px solid red;
}
span {
border:
inherit;
}