Чтобы сделать цветное изображение чёрно-белым при помощи стилей CSS, есть несколько способов. Рассмотрим два наиболее распространённых способа.
- При помощи фильтра grayscale
CSS-фильтр grayscale преобразует цветное изображение в чёрно-белое, уменьшая насыщенность цветов и делая изображение похожим на оттенки серого.
Пример:
img {
filter: grayscale(100%);
/* Дополнительно можно добавить преобразование, чтобы сохранить качество картинки */
-webkit-filter: grayscale(100%);
filter: gray; /* для IE6-9 */
}
Здесь мы задаём для элемента img фильтр grayscale на 100%, что полностью преобразует изображение в чёрно-белое. Для сохранения качества изображения мы также добавляем альтернативный оператор для браузеров Webkit и ещё один для IE6-9.
- При помощи наложения CSS-фона
Другой способ предусматривает наложение чёрно-белого фона на изображение с указанием определённой прозрачности.
Пример:
img {
background-color: #000;
background-blend-mode: saturation;
opacity: 0.5;
}
Здесь мы задаём для элемента img чёрный фон с помощью свойства background-color, затем добавляем наложение на изображение с помощью свойства background-blend-mode сетки grayscales. Эффект чёрно-белого изображения достигается за счёт добавления специальной прозрачности, которую мы создаём при помощи свойства opacity.
Используя один из этих способов, вы можете легко преобразовать цветное изображение в чёрно-белое, подстраивая его под заданные дизайн-требования.
