Как сделать картинку чёрно-белой?
Обычно изображение для сайта готовят в графическом редакторе и в нём уже задают яркость, контрастность и другие параметры картинки. С помощью CSS этот процесс можно упростить и менять цветность «на лету», к примеру, при наведении указателя на изображение. Для этого используем свойство filter и функцию grayscale(1) для создания чёрно-белой картинки и grayscale(0) для цветной. Чтобы всё это менялось плавно и красиво, добавляем свойство transition с указанием времени перехода (пример 1).
Пример 1. Чёрно-белая картинка
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цветности картинки при наведении
В браузере Internet Explorer свойство filter не работает.
См. также
Автор и редакторы
Последнее изменение: 24.12.2018
Редакторы: Влад Мержевич