Изображение можно преобразовать в оттенки серого или в черно-белое изображение, применив к нему CSS-фильтр заданной гаммы цвета, а здесь говорим про серый оттенок. Что частичное преобразование в оттенках серого может быть сделано. Иногда нам нужно или требует основной стиль дизайна показать черно-белое изображение на веб-странице.
Для этого нам не нужно делать это вручную или задействовать графический редактор, такой как Photoshop. Изображение может быть напрямую отображено в градациях серого с использованием CSS. Преобразование изображения в черно-белое возможно с помощью свойства фильтра CSS. Мы используем CSS-функцию grayscale () в качестве значения.
Код
#someimg {
filter: grayscale(1);
}
Оттенки серого grayscale() принимает число или процент указывает на количество конверсии требуется черно-белый. Значение 1 или 100% означает, что изображение будет полностью преобразовано в оттенки серого. При значении 0 или 0% изображение останется прежним. Значения между ними частично преобразуют изображение в черно-белое.
Код
#someimg {
/* 50% grayscale */
filter: grayscale(0.5);
}
Также: №1
Код
#someimg {
/* 80% grayscale */
filter: grayscale(80%);
}
Также: №3
Код
#someimg {
/* no effect on image */
filter: grayscale(0);
}
Если для фильтра grayscale() параметры не передаются, по умолчанию он равен 100%.
