Функция sepia

Die Funktion sepia ermöglicht es, aus einem Hintergrundbild ein Sepia zu erstellen - ein Schwarz-Weiß-Bild mit einem bräunlichen Farbton. Der Wert 0 bedeutet, dass das Bild ursprünglich bleibt. Der Wert 100% oder 1 verwandelt den Hintergrund vollständig in Sepia. Jede Zahl in diesem Bereich wendet Sepia linear an. Ein negativer Wert kann nicht angegeben werden. Standardmäßig ist der Wert 0.

Syntax

Selektor {
	filter: sepia(Zahl);
}

Beispiel

Lassen Sie uns unser Bild in vollständiges Sepia verwandeln:

<div id="elem"></div>

#elem {
	filter: sepia(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns nun die Sepia-Intensität auf 50% reduzieren:

<div id="elem"></div>

#elem {
	filter: sepia(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns nun in der Funktion sepia den Wert 0 setzen:

<div id="elem"></div>

#elem {
	filter: sepia(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Siehe auch

die Funktion blur,
die den Hintergrund unscharf macht
die Funktion brightness,
die die Helligkeit des Hintergrunds festlegt
die Funktion contrast,
die den Kontrast des Hintergrunds festlegt
die Funktion drop-shadow,
die einen Schatten für den Hintergrund festlegt
die Funktion hue-rotate,
die die Farbton des Hintergrunds festlegt
die Funktion invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz des Hintergrunds festlegt
die Eigenschaft background,
die eine Kurzform für den Hintergrund darstellt
die Eigenschaft background-image,
mit der einem Block ein Hintergrundbild zugewiesen werden kann
die Eigenschaft filter,
die den Stil für den Hintergrund festlegt