alpha() CSS-Funktion

Syntax

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

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

Parameter

from <color>

Das relative color Syntax-Keyword from, gefolgt von einem gültigen <color> Wert, der die ursprüngliche Farbe definiert. Die Farbkomponenten der ursprünglichen Farbe bleiben im Ergebnis unverändert; nur der Alpha-Kanal wird beeinflusst.

/ <alpha-value> Optional

Ein <alpha-value>, das den Alpha des Ausgabewerts spezifiziert. Dies kann eine <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100% oder ein calc() Ausdruck sein. Innerhalb dieses Wertes kann das Keyword alpha verwendet werden, um den Alpha-Kanal der ursprünglichen Farbe als <number> anzugeben (wo 1.0 100% entspricht). Wenn dieses Argument weggelassen wird, wird der Alpha der ursprünglichen Farbe unverändert verwendet.

Rückgabewert

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

Beschreibung

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

Innerhalb des Alpha-Wert Arguments löst das Komponenten-Keyword alpha den Alpha-Kanal der ursprünglichen Farbe als <number> im Bereich [0, 1] auf. Dies ermöglicht es, das Ausgabe-Alpha relativ zum Eingangsausdruck auszudrücken, zum Beispiel es mit calc(alpha * 0.5) zu halbieren oder es mit clamp(0.2, alpha, 0.8) zu klammern.

Im Gegensatz zur allgemeinen relative color syntax (z.B. oklch(from ...)) zeigt die alpha() Funktion nicht die einzelnen Farbkanal-Keywords des Ursprungsfarbraums an. Sie bezieht sich ausschließlich auf den Alpha-Kanal und hält den Rest der Farbe intakt.

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

Beispiele

Ersetzen des Alpha einer Farbe

In diesem Beispiel spezifizieren wir zwei Farben. Die zweite Farbe wird durch Weitergabe der ersten Farbe in die alpha() Funktion definiert, wobei 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 {
  --mycolor: oklch(60% 0.25 315 / 0.3);

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

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

.box2 {
  background-color: var(--mycolor-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;
}

Ableitung einer halbtransparenten Variante

Dieses Beispiel ist dem vorherigen sehr ähnlich, außer dass diesmal das Alpha der zweiten Farbe als die Hälfte des Alpha der ersten Farbe berechnet wird, indem das alpha Komponenten-Keyword innerhalb eines calc() Ausdrucks verwendet wird.

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

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

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

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

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

Verblassen einer Farbe beim Hover

In diesem Beispiel verblasst der Hintergrund eines Elements beim :hover auf 40% Opazität, 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

• <color> Datentyp
• <alpha-value> Datentyp
• Relative color syntax
• CSS colors Modul
• CSS custom properties und var()