Функцыя 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,
якая задае празрыстасць фону
функцыя sepia,
якая пераўтварае фон у сепію
уласцівасць background,
якая ўяўляе сабой уласцівасць-скарачэнне для фону
уласцівасць background-image,
з дапамогай якога блоку можна задаць фонавую карцінку
уласцівасць filter,
якая задае стыль для фону