Funktion brightness

Die Funktion brightness ermöglicht es, die Helligkeit eines Hintergrundbildes zu ändern. Die ursprüngliche Helligkeit des Hintergrunds wird durch den Wert 100% oder 1 bestimmt. Wenn diese verringert werden, sinkt auch die Helligkeit des Bildes. Entsprechend erhöht sich die Helligkeit, wenn der Wert über 100% erhöht wird. Negative Werte werden nicht angewendet, und ein leerer Wert wird automatisch als 1 interpretiert.

Syntax

Selector {
	filter: brightness(Zahl);
}

Beispiel

Lassen Sie uns die Helligkeit unseres Bildes auf 20% einstellen:

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

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

Beispiel

Und nun erhöhen wir die Helligkeit des Bildes auf 120%:

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

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

Beispiel

Lassen Sie uns für unser Bild die ursprüngliche Helligkeit einstellen:

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

#elem {
	filter: brightness(1);
	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 contrast,
die den Kontrast für den Hintergrund festlegt
die Funktion drop-shadow,
die einen Schatten für den Hintergrund festlegt
die Funktion hue-rotate,
die die Farbton für den Hintergrund festlegt
die Funktion invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz für den Hintergrund festlegt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt
die Eigenschaft background,
die eine Kurzschreibweise 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