Wie erreicht man geerbte Werte mit CSS-Variablen?

Wie speichere ich einen geerbten Wert in einer CSS-Variablen (auch bekannt als benutzerdefinierte Eigenschaft)?

Szenario

Bedenken Sie den folgenden CSS-Code:

:root {
  --color: rgba(20, 20, 20, 0.5);
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

In diesem Code verwenden wir --color, um den Hintergrund des Pseudoelements des .box-Elements zu steuern. Es kann jedoch vorkommen, dass wir die Farbe vom übergeordneten .box-Element erben möchten.

CSS-Variablenvererbungsherausforderung

In CSS wird das Schlüsselwort „inherit“ nicht als Wert für unterstützt CSS-Variablen. Das bedeutet, dass wir --color nicht direkt so einstellen können, dass es vererbt, um den gewünschten Effekt zu erzielen.

Lösung: Fallback-Wert und Anfangswert verwenden

Um diese Einschränkung zu überwinden, können wir zwei Techniken anwenden:

1. Verwendung des Fallback-Werts:

Durch die Verwendung des Fallback-Werts in CSS-Variablen können wir der Eigenschaft mitteilen, dass sie inherit verwenden soll, wenn --color nicht explizit definiert ist.

background: var(--color, inherit);

Allerdings Da --color in diesem Fall immer auf Stammebene definiert und vererbt wird, wird der Fallback-Wert niemals verwendet.

2. Verwenden des Anfangswerts:

Wir können den Anfangswert verwenden, um die Farbe zu „undefinieren“ und die Verwendung des Fallback-Werts zu erzwingen. Gemäß der CSS-Spezifikation ist der Anfangswert ein leerer Wert, der eine besondere Interaktion mit var() hat.

.box:before {
  ...
  background: var(--color, inherit);
  ...
}

.box {
  ...
  --color: initial;
}

Mit dieser Modifikation können wir eine Vererbung von Werten innerhalb der CSS-Variablen erreichen, was uns ermöglicht um die Hintergrundfarbe basierend auf der Farbe des übergeordneten Elements zu steuern.

<div class="box red">

Das obige ist der detaillierte Inhalt vonWie erreicht man geerbte Werte mit CSS-Variablen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!