Лучше использовать отдельный класс для изображений, которые нужно сделать черно-белыми и добавлять стили для этого класса, чтобы случайно не сделать черно-белыми все изображения на сайте.
Пример использования
.example-bw {
filter: grayscale(100%);
}Как это выглядит (при наведении изображение станет цветным):
Как работает grayscale
Свойство filter в CSS позволяет применять различные визуальные эффекты к элементам, в том числе и к изображениям. Один из этих эффектов — grayscale, который принимает значение в процентах от 0 до 100. При значении 0% изображение остается в исходных цветах, а при 100% оно становится черно-белым.
Где это может пригодится?
- Создание эффектов. Представьте эффект, когда при наведении курсора изображение оживает, возвращая свои цвета. Это создаст интерактивный и запоминающийся опыт для пользователей:
- Фокус на Важном. Обесцвечивание помогает выделить текстовую информацию или другие значимые элементы, убирая отвлекающие цветовые акценты.
- Дизайн. Черно-белые изображения способны привнести в дизайн страницы нотки утонченности и минимализма. Они могут подчеркнуть важные детали и придать сайту уникальный стиль.
Совместимость
Свойство filter: grayscale(100%); поддерживается большинством современных браузеров, включая Chrome, Firefox и другие.