Функција invert
Функцијата invert овозможува
инвертирање на боите во позадинската слика.
Вредноста 0 означува,
дека сликата останува оригинална. Вредноста
100% или 1 целосно ги инвертира боите на позадината.
Кој било број расположен во
овој опсег делумно ги инвертира боите.
Не може да се зададе негативна вредност.
Стандардно вредноста е 0.
Синтакса
селектор {
filter: invert(број);
}
Пример
Ајде да ги инвертираме боите на нашата слика до
вредност 50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А сега ајде да ги инвертираме боите на нашата слика до
вредност 100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А сега ајде да зададеме во
функцијата invert вредност
еднаква на 0:
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Погледнете ги и
-
функцијата
blur,
која ја заматува позадината -
функцијата
brightness,
која ја задава осветленоста на позадината -
функцијата
contrast,
која ја задава контрастноста на позадината -
функцијата
drop-shadow,
која задава сенка на позадината -
функцијата
hue-rotate,
која ја задава нијансата на позадината -
функцијата
opacity,
која ја задава провидноста на позадината -
функцијата
sepia,
која ја претвора позадината во сепија -
својството
background,
кое претставува кратенка за позадина -
својството
background-image,
со кое на блокот може да се зададе позадинска слика -
својството
filter,
кое задава стил за позадината