Как отобразить изображение в оттенках серого с помощью HTML/CSS

Есть много способов для преобразования изображения в серый цвет с помощью CSS. В этой статье мы расскажем, как можно отобразить цветное изображение в оттенках серого с помощью CSS свойств.

  1. Сначала установите тег <img>.
  2. Вставьте изображение в тег <img>. Потом используйте свойство filter со значением grayscale. Filterприменяет визуальные эффекты к элементу (изображению).

Давайте посмотрим следующий пример, чтобы лучше понять детали:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      img { 
      -webkit-filter: grayscale(100%); 
      filter: grayscale(100%); 
      }          
    </style>
  </head>
  <body>
    <h2>Как отобразить изображение в оттенках серого с помощью HTML/CSS</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" width="400" height="300" alt="tree" />   
  </body>
</html>

Рассмотрим другой пример:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      img { 
      -webkit-filter: grayscale(1); 
      filter: grayscale(1); 
      } 
      img:hover { 
      -webkit-filter: grayscale(0); 
      filter: none; 
      } 
      h1 { 
      color:green; 
      } 
    </style>
  </head>
  <body>
    <h2>Как отобразить изображение в оттенках серого с помощью HTML/CSS</h2>
    <img src=" /uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" 
      width="400" height="300" alt="tree" />   
  </body>
</html>
-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством filter.

В современных браузерах доступен новый способ отображения изображения в оттенках серого.

Свойство background-blend-mode позволяет использовать интересные эффекты подобно grayscale.

Такую возможность дает значение luminosity, установленное на белом фоне.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example{
      width: 400px;
      height: 300px;
      background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"),  #fff;         
      background-size: cover;
      }
      .example:hover {
      background-blend-mode: luminosity;
      }
    </style>
  </head>
  <body>
    <h2>Преобразование изображения в оттенки серого с помощью HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>

Можно использовать 3 уровня наложения. Первый уровень -это изображение, второй - черно-белый градиент. Если примените многократный режим смешивания, вы получите белый результат по-прежнему на белой части, но оригинальное изображение на черной части не будет иметь никакого эффекта многократного.

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

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 450px;
      height: 400px;
      }
      .example{
      background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), 
      linear-gradient(0deg, white 33%, black 66%), url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"); 
      background-position: 0px 0px, 0px 0%, 0px 0px;
      background-size: cover, 100% 300%, cover;
      background-blend-mode: luminosity, multiply;
      transition: all 1.5s;
      }
      .example:hover {
      background-position: 0px 0px, 0px 70%, 0px 0px;
      }
    </style>
  </head>
  <body>
    <h2>Преобразование изображения в оттенки серого с помощью  HTML/CSS</h2>
    <div class="example"></div>
  </body>
</html>