Az opacity tulajdonság

Az opacity tulajdonság beállítja egy elem áttetszőségét. Ha egy elem részben áttetsző - ez azt jelenti, hogy az alatta lévő elemek átsütődnek rajta.

A tulajdonság értéke egy 0 és 1 közötti tört szám. Ebben az esetben a 0 érték a teljes átlátszóság, a 1 érték pedig a teljes átlátszatlanság. Egy köztes érték, például a 0.3, részleges áttetszőséget állít be. Alapértelmezett érték: 1.

Szintaxis

szelektor {
	opacity: 0 és 1 közötti szám;
}

Példa

Ebben a példában a blokk részben áttetszővé lett téve, így a blokk szegélyén és szövegén átlátszik a szülő háttere:

<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;
}