- Теория
- Теория
Инверсия и насыщенность, invert и saturate
Ещё два фильтра для цветовых эффектов — инверсия цвета и цветовая насыщенность. Как понятно из названия, при инверсии цвета меняются на противоположные, и мы получаем «негатив» картинки, а цветовая насыщенность делает краски ярче и противоположна по смыслу фильтру обесцвечивания.
Инверсия цвета — invert
. Допустимые простые числовые значения от
0
до 1
и процентные значения от 0%
до 100%
.
.effect {
filter: invert(1); /* полная инверсия цвета */
filter: invert(50%); /* инверсия цвета наполовину, все цвета серые */
}
Цветовая насыщенность — saturate
. Допустимые простые числовые значения
от 0
и выше и процентные значения от 0%
и выше.
При значении фильтра 1
или 100%
элемент отображается без изменений.
Если установить нулевое значение, то картинка обесцветится, как при использовании
фильтра grayscale
.
.effect {
filter: saturate(2); /* цвета ярче вдвое */
filter: saturate(50%); /* цвета вдвое бледнее */
filter: saturate(0); /* обесцвеченная картинка */
}
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.