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