alpha() CSS-Funktion

Syntax

/* Replace alpha with a fixed value */
alpha(from red / 50%)
alpha(from var(--my-color) / 80%)

/* Derive alpha relative to the origin color's alpha */
alpha(from var(--my-color) / calc(alpha * 0.5))

Parameter

from <color>

Das relative Farbsyntax-Schlüsselwort from, gefolgt von einem gültigen <color>-Wert, der die ursprüngliche Farbe definiert. Die Farbkomponenten der ursprünglichen Farbe werden unverändert in das Ergebnis übernommen; nur der Alpha-Kanal wird beeinflusst.

/ <alpha-value> Optional

Ein <alpha-value>, das die Alpha des Ausgabe-Farbtons spezifiziert. Dies kann eine <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100% oder ein calc()-Ausdruck sein. Innerhalb dieses Werts kann das Schlüsselwort alpha verwendet werden, um auf den Alpha-Kanal der ursprünglichen Farbe als <number> zu verweisen (wobei 1.0 100% entspricht). Wenn dieses Argument weggelassen wird, wird die Alpha der ursprünglichen Farbe unverändert verwendet.

Rückgabewert

Ein Farbwert im selben Farbraum wie die ursprüngliche Farbe, mit identischen Farbkomponenten und einem modifizierten Alpha-Kanalwert, wie angegeben.

Beschreibung

Die alpha()-Funktion ist eine relative Farbsyntax-Funktion, die es Ihnen ermöglicht, die Transparenz einer Farbe anzupassen, ohne ihre anderen Komponenten neu zu schreiben. Dies ist besonders nützlich, wenn Sie eine halbtransparente Variante eines Designtokens oder einer benutzerdefinierten Eigenschaftsfarbe benötigen und die Farbe automatisch aus dem Original ableiten möchten, anstatt einen separaten Wert zu pflegen.

Innerhalb des Alpha-Wert-Arguments wird das Komponentenschlüsselwort alpha auf den Alpha-Kanal der ursprünglichen Farbe als <number> im Bereich [0, 1] aufgelöst. Dies ermöglicht es Ihnen, die Ausgabetransparenz relativ zur Eingabe auszudrücken, zum Beispiel, indem Sie es mit calc(alpha * 0.5) halbieren oder mit clamp(0.2, alpha, 0.8) clampen.

Im Gegensatz zur allgemeinen relativen Farbsyntax (z. B. oklch(from ...)) gibt die alpha()-Funktion die einzelnen Farbkanal-Schlüsselwörter des ursprünglichen Farbraums nicht preis. Sie befasst sich ausschließlich mit dem Alpha-Kanal und hält den Rest der Farbe intakt.

Der Rückgabewert befindet sich immer im selben Farbraum wie die ursprüngliche Farbe. Zum Beispiel, wenn die ursprüngliche Farbe eine oklch()-Farbe ist, wird das Ergebnis ebenfalls in OKLCh aufgelöst, mit der gleichen Helligkeit, Chroma und dem gleichen Farbton.

Beispiele

Ersetzen des Alpha-Wertes einer Farbe

In diesem Beispiel spezifizieren wir zwei Farben. Die zweite Farbe wird definiert, indem die erste Farbe in die alpha()-Funktion übergeben und ihr Alpha-Kanal auf einen festen Wert von 80% gesetzt wird. Die beiden Farben werden als background-color von zwei <div>-Elementen gesetzt, um den Unterschied zu demonstrieren.

<div class="box1">Original</div>
<div class="box2">Fixed 80% alpha</div>

:root {
  --my-color: oklch(60% 0.25 315 / 0.3);

  /* Same color, but with alpha set to 80% */
  --my-color-80: alpha(from var(--my-color) / 80%);
}

.box1 {
  background-color: var(--my-color);
}

.box2 {
  background-color: var(--my-color-80);
}

body {
  font-family: sans-serif;
  display: flex;
  gap: 10%;
  justify-content: center;
}

div {
  width: 40%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Ableiten einer halbtransparenten Variante

Dieses Beispiel ist dem vorhergehenden sehr ähnlich, außer dass dieses Mal die Alpha der zweiten Farbe als die Hälfte der Alpha der ersten Farbe berechnet wird, wobei das alpha-Komponentenschlüsselwort in einem calc()-Ausdruck verwendet wird.

<div class="box1">Original</div>
<div class="box2">Derived 50% alpha</div>

:root {
  --my-color: oklch(60% 0.25 315 / 0.8);

  /* Half the opacity of --my-color */
  --my-color-half-opacity: alpha(from var(--my-color) / calc(alpha * 0.5));
}

.box1 {
  background-color: var(--my-color);
}

.box2 {
  background-color: var(--my-color-half-opacity);
}

Ausblenden einer Farbe bei Hover

In diesem Beispiel verblasst die Hintergrundfarbe eines Elements bei :hover auf 40% Deckkraft, während die Farbe selbst gleich bleibt.

<button class="card">Hover over me</button>

:root {
  --brand: oklch(55% 0.22 270);
}

.card {
  background-color: var(--brand);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card:hover {
  background-color: alpha(from var(--brand) / 40%);
}

body {
  padding: 2rem;
}

@supports not (color: alpha(from red / 50%)) {
  body::before {
    font-family: sans-serif;
    content: "Your browser does not support the CSS alpha() function.";
    background-color: wheat;
    padding: 1rem 0;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 30% 0 auto;
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Datentyp <color>
• Datentyp <alpha-value>
• Relative Farbsyntax
• Modul CSS-Farben
• CSS-Benutzereigenschaften und var()