Как создать фоновые изображения в оттенках серого с помощью CSS

В нашу эпоху ярких и динамичных веб-дизайнов иногда необходимо добавить немного утонченной простоты. Один из способов добиться этого — преобразовать фоновые изображения в оттенки серого, что может придать веб-сайту классический или винтажный вид.

Кросс-браузерные фильтры CSS3

Самый простой подход к оттенкам серого фона image заключается в применении фильтра CSS3 в оттенках серого:

-webkit-filter: grayscale(100%);

Однако этот метод работает только в Chrome v.15 и Safari v.6 из-за ограничения совместимости браузера.

Кросс-браузерный SVG-фильтр

Чтобы добиться кросс-браузерных эффектов оттенков серого, вы можете использовать SVG-фильтры:

filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

Это решение работает в большинстве основных браузеров, включая Firefox, Chrome и Edge.

jQuery Animation

Если вы хотите динамически переключать эффект оттенков серого с помощью JavaScript, вы можете использовать jQuery:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

Этот код добавит класс оттенков серого и затемнит изображение при наведении курсора.

Совместимость с IE10-11

В Internet Explorer 10-11 указанный выше SVG Техника фильтрации не работает. Вместо этого вы можете использовать фильтр обесцвечивания:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

Этот фильтр можно применить к изображениям с помощью атрибута filter.

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