sepia()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die sepia() CSS Funktion konvertiert das Eingabebild in Sepia und verleiht ihm ein wärmeres, gelblich-braunes Erscheinungsbild. Das Ergebnis ist eine <filter-function>.

Probieren Sie es aus

filter: sepia(0);

filter: sepia(0.2);

filter: sepia(60%);

filter: sepia(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

sepia(amount)

Parameter

amount Optional: Die Stärke der Konvertierung, angegeben als ein <number> oder ein <percentage>. Ein Wert von 100% ist vollständig sepia, während ein Wert von 0% die Eingabe unverändert lässt. Werte zwischen 0% und 100% wirken als lineare Multiplikatoren auf den Effekt. Der anfängliche Wert für Interpolierung ist 0. Der Standardwert ist 1.

Formale Syntax

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )

Beispiele

Beispiele für korrekte Werte für sepia()

css

sepia(0)     /* No effect */
sepia(.65)   /* 65% sepia */

sepia()      /* Completely sepia */
sepia(100%)

Spezifikationen

Specification
Filter Effects Module Level 1 # funcdef-filter-sepia

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die anderen <filter-function> Funktionen, die in den Werten der filter und backdrop-filter Eigenschaften verwendet werden können, umfassen: