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