Как сделать картинку черно белой CSS

Чтобы сделать цветное изображение чёрно-белым при помощи стилей CSS, есть несколько способов. Рассмотрим два наиболее распространённых способа.

1. При помощи фильтра grayscale

CSS-фильтр grayscale преобразует цветное изображение в чёрно-белое, уменьшая насыщенность цветов и делая изображение похожим на оттенки серого.

Пример:

img {
  filter: grayscale(100%);
  /* Дополнительно можно добавить преобразование, чтобы сохранить качество картинки */
  -webkit-filter: grayscale(100%);
  filter: gray; /* для IE6-9 */
}

Здесь мы задаём для элемента img фильтр grayscale на 100%, что полностью преобразует изображение в чёрно-белое. Для сохранения качества изображения мы также добавляем альтернативный оператор для браузеров Webkit и ещё один для IE6-9.

2. При помощи наложения CSS-фона

Другой способ предусматривает наложение чёрно-белого фона на изображение с указанием определённой прозрачности.

Пример:

img {
  background-color: #000;
  background-blend-mode: saturation;
  opacity: 0.5;
}

Здесь мы задаём для элемента img чёрный фон с помощью свойства background-color, затем добавляем наложение на изображение с помощью свойства background-blend-mode сетки grayscales. Эффект чёрно-белого изображения достигается за счёт добавления специальной прозрачности, которую мы создаём при помощи свойства opacity.

Используя один из этих способов, вы можете легко преобразовать цветное изображение в чёрно-белое, подстраивая его под заданные дизайн-требования.