Функција brightness

Функцијата brightness овозможува да се промени осветленоста на позадинската слика. Оригиналната осветленост на позадината се определува со вредноста 100% или 1, со нивно намалување се намалува и осветленоста на сликата. Соодветно со зголемување на вредноста над 100% осветленоста се зголемува. Негативните вредности не се применуваат, а празната вредност автоматски се восприема како 1.

Синтакса

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

Пример

Ајде да ја поставиме осветленоста за нашата слика на 20%:

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

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

Пример

А сега ајде да ја зголемиме осветленоста на сликата на 120%:

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

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

Пример

Ајде да ја поставиме за нашата слика оригиналната осветленост:

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

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

Погледнете ги и

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