CSS-Funktion `sepia()`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion sepia() wandelt das Eingabebild in Sepia um und verleiht ihm ein wärmeres, stärker gelb-braunes Aussehen. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

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

/* No sepia conversion */
sepia(0)

/* Complete sepia conversion */
sepia()
sepia(1)
sepia(100%)

/* 60% sepia conversion */
sepia(.6)
sepia(60%)

Parameter

<number> oder <percentage> Optional: Gibt den Grad der Umwandlung an. Ein Wert von 100% bewirkt eine vollständige Sepia-Umwandlung, während ein Wert von 0% das Eingabebild unverändert lässt. Werte zwischen 0% und 100% skalieren den Effekt linear. Werte über 100% sind zulässig, der Effekt wird jedoch auf 100% begrenzt. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist 0. Der Standardwert ist 1.

Rückgabewert

Ein <filter-function>-Wert.

Formale Syntax

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

Beispiele

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter sepia()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Das SVG-Filterelement <feColorMatrix> kann ebenfalls verwendet werden, um Inhalte in Sepia umzuwandeln. Wir legen die values für die Farbmatrix fest und können anschließend über die ID des <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="sepia70" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="0.5751 0.5383 0.1323 0 0
              0.2443 0.7802 0.1176 0 0
              0.1904 0.3738 0.3917 0 0
              0 0 0 1 0" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: sepia(0.7);
filter: sepia(70%);
filter: url("#sepia70"); /* with embedded SVG */
filter: url("fileName.svg#sepia70"); /* external SVG */

CSS

Wir fügen CSS hinzu, das Elemente anhand ihrer Klasse css-filter oder svg-filter in Sepia umwandelt:

css

.css-filter {
  filter: sepia(0.7);
}

.svg-filter {
  filter: url("#sepia70");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>sepia()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Zu den weiteren <filter-function>-Funktionen, die als Werte für die Eigenschaften filter und backdrop-filter verwendet werden können, gehören:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion sepia()

SVG

CSS

Help improve MDN

CSS-Funktion `sepia()`