Eigenschaft opacity

Die Eigenschaft opacity legt die Halbtransparenz eines Elements fest. Wenn ein Element halbtransparent ist, bedeutet dies, dass die darunter liegenden Elemente durchscheinen.

Die Eigenschaft akzeptiert als Wert eine Dezimalzahl zwischen 0 und 1. Dabei steht der Wert 0 für volle Transparenz und der Wert 1 für volle Deckkraft. Ein Zwischenwert, z.B. 0.3, legt Halbtransparenz fest. Standardwert: 1.

Syntax

Selektor {
	opacity: Zahl von 0 bis 1;
}

Beispiel

In diesem Beispiel wurde dem Block eine Halbtransparenz hinzugefügt, und durch den Rand und den Text dieses Blocks scheint der Hintergrund des Elternelements durch:

<div id="parent">
	<div id="elem">
		Lorem ipsum dolor sit amet.
	</div>
</div>

#parent {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 30px;
}
#elem {
	width: 300px;
	height: 200px;
	border: 20px solid red;
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
	background: black;
	opacity: 0.7;
}