Wie kann ich einen geerbten Wert in einer CSS-Variablen speichern?

Werte in CSS-Variablen erben

Im Bereich CSS bieten benutzerdefinierte Eigenschaften, auch CSS-Variablen genannt, immense Flexibilität und Kontrolle über Stile. Eine häufige Frage stellt sich, wenn wir einen geerbten Wert in einer Variablen speichern möchten. Lassen Sie uns in eine Lösung eintauchen.

Die Herausforderung

Bedenken Sie den folgenden Code:

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

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

Hier zielen wir darauf ab, dass der Hintergrund die erbt Farbe aus dem :root-Element. Die Verwendung von inherit als Wert von --color funktioniert jedoch aufgrund von Vererbungsregeln nicht.

Die Lösung: Fallback-Wert und anfängliches Schlüsselwort

Um einen geerbten Wert zu speichern können wir die Fallback-Wert-Funktion von CSS-Variablen nutzen. Wir können Folgendes festlegen:

background: var(--color, inherit);

Dies weist den Browser an, die Vererbung zu verwenden, wenn --color nicht definiert ist. Da --color jedoch immer auf der :root-Ebene definiert ist, wird der Fallback nicht verwendet.

Um dieses Problem zu beheben, können wir --color mit dem anfänglichen Schlüsselwort:

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

Durch die Verwendung von initial wird die benutzerdefinierte Eigenschaft effektiv aufgehoben, sodass die Vererbung wirksam wird. Dieser Code erbt erfolgreich die Farbe vom :root-Element.

Das obige ist der detaillierte Inhalt vonWie kann ich einen geerbten Wert in einer CSS-Variablen speichern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!