Funktion opacity

Die Funktion opacity ermöglicht es, die Transparenz eines Hintergrundbildes zu verändern. Der Wert 100% oder 1 belässt dem Bild seine ursprüngliche Transparenz. Der Wert 0 bedeutet, dass das Bild vollständig transparent wird. Jede Zahl in diesem Bereich legt eine teilweise Transparenz des Hintergrunds fest. Ein negativer Wert kann nicht festgelegt werden. Standardmäßig ist der Wert 1.

Syntax

Selektor {
	filter: opacity(Zahl);
}

Beispiel

Lassen Sie uns die Transparenz unseres Bildes auf 50% setzen:

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

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

Beispiel

Lassen Sie uns nun die Transparenz auf 100% setzen:

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

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

Beispiel

Lassen Sie uns nun in der Funktion opacity den Wert 0 festlegen:

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

#elem {
	filter: opacity(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 Farbtönung des Hintergrunds festlegt
die Funktion invert,
die die Farben des Hintergrunds invertiert
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