opacity függvény

Az opacity függvény lehetővé teszi a háttérkép átlátszóságának módosítását. A 100% vagy 1 érték az eredeti átlátszóságot hagyja meg a képnek. A 0 érték azt jelenti, hogy a kép teljesen átlátszóvá válik. Az ezen a tartományon belüli bármely szám a háttér részleges átlátszóságát határozza meg. Negatív érték nem adható meg. Alapértelmezetten az érték 1.

Szintaxis

szelektor {
	filter: opacity(szám);
}

Példa

Állítsuk a kép átlátszóságát 50%-ra:

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

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

Példa

Most pedig állítsuk az átlátszóságot 100%-ra:

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

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

Példa

Most pedig adjunk meg a opacity függvényben 0 értéket:

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

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

Lásd még

a blur függvény,
amely elhomályosítja a hátteret
a brightness függvény,
amely beállítja a háttér fényerejét
a contrast függvény,
amely beállítja a háttér kontrasztját
a drop-shadow függvény,
amely árnyékot ad a hátterhez
a hue-rotate függvény,
amely beállítja a háttér színárnyalatát
a invert függvény,
amely invertálja a háttér színeit
a sepia függvény,
amely szépia effektust ad a hátternek
a background tulajdonság,
ami egy rövidített tulajdonság a háttérhez
a background-image tulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz