- Теория
- Теория
Инверсия и насыщенность, 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.