CSS-Farbenschlüsselwörter

Dieses Kapitel erläutert transparent、currentcolor und inherit Schlüsselwort.

transparent Schlüsselwort

transparent Das Schlüsselwort wird verwendet, um Farben transparent zu machen. Es wird oft verwendet, um eine transparente Hintergrundfarbe für ein Element zu setzen.

Beispiel

In diesem Beispiel wird die Hintergrundfarbe des <div>-Elements vollständig transparent sein, und das Hintergrundbild wird angezeigt:

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

Probieren Sie es selbst aus

Hinweis:transparent Das Schlüsselwort ist äquivalent zu rgba(0,0,0,0)RGBA-Farbwerte sind eine Erweiterung der RGB-Farbwerte, die einen Alpha-Kanal haben - er bestimmt die Transparenz der Farbe. Mehr Informationen finden Sie in unserem CSS RGB Kapitel und CSS-Farben Kapitel.

currentcolor Schlüsselwort

currentcolor Das Schlüsselwort ähnelt einem Variablen, es speichert den aktuellen Wert der color-Eigenschaft des Elements.

Dieser Schlüsselwort ist sehr nützlich, wenn Sie eine bestimmte Farbe im Element oder auf der Seite konsistent halten möchten.

Beispiel

In diesem Beispiel wird die Rahmenfarbe des <div>-Elements blau sein, da die Textfarbe des <div>-Elements blau ist:

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

Probieren Sie es selbst aus

Beispiel

In diesem Beispiel ist die Hintergrundfarbe des <div>-Elements auf den aktuellen Farbwert des body-Elements gesetzt:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Probieren Sie es selbst aus

Beispiel

In diesem Beispiel werden die Farbwerte für die Bordersetzung 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;
}

Probieren Sie es selbst aus

inherit Schlüsselwort

inherit Das Schlüsselwort gibt an, dass das Attribut seinen Wert von seinem übergeordneten Element übernehmen soll.

inherit Schlüsselwörter können für jeden CSS-Attribut und für jedes HTML-Element verwendet werden.

Beispiel

In diesem Beispiel wird die Bordersetzung von <span> von der übergeordneten Elemente geerbt:

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

Probieren Sie es selbst aus