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.
Die sepia()-CSS-Funktion wandelt das Eingabebild in Sepiatöne um und verleiht ihm ein wärmeres, stärker gelb-braunes Aussehen. Ihr 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
sepia(amount)
Parameter
amountOptional-
Der Grad der Umwandlung, angegeben als
<number>oder<percentage>. Bei einem Wert von100%wird das Bild vollständig in Sepiatöne umgewandelt, während es bei0%unverändert bleibt. Werte zwischen0%und100%skalieren den Effekt linear. Werte über100%sind zulässig, der Effekt wird jedoch auf100%begrenzt. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist0. Der Standardwert ist1.
Formale Syntax
<sepia()> =
sepia( [ <number> | <percentage> ]? )
Beispiele
Beispiele für gültige Werte von sepia()
sepia(0) /* No effect */
sepia(.65) /* 65% sepia */
sepia() /* Completely sepia */
sepia(100%)
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # funcdef-filter-sepia |
Browser-Kompatibilität
Siehe auch
Zu den weiteren <filter-function>-Funktionen, die als Werte der Eigenschaften filter und backdrop-filter verwendet werden können, gehören: