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