Функција opacity

Функција opacity омогућава промену транспарентности позадинске слике. Вредност 100% или 1 задржава слици изворну транспарентност. Вредност 0 означава да ће слика постати потпуно транспарентна. Било који број унутар овај опсег задаје делимичну транспарентност позадине. Негативна вредност се не може задати. Подразумевана вредност је 1.

Синтакса

селектор {
	filter: opacity(број);
}

Пример

Поставимо транспарентност наше слици на 50%:

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

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

Пример

А сада поставимо транспарентност на 100%:

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

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

Пример

А сада задајмо у функцији opacity вредност једнаку 0:

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

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

Погледајте такође

функција blur,
која замагљује позадину
функција brightness,
која задаје осветљеност позадини
функција contrast,
која задаје контраст позадини
функција drop-shadow,
која задаје сенку позадини
функција hue-rotate,
која задаје нијансу боје позадини
функција invert,
која инвертује боје позадине
функција sepia,
која претвара позадину у сепију
својство background,
које представља скраћеницу за својства позадине
својство background-image,
помоћу ког блоку можемо задати позадинску слику