Функција 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,
со кое на блокот може да му се зададе позадинска слика