• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Преобразование изображения в серый на CSS (Перевод изображения в режим серого цвета производится в CSS)
Преобразование изображения в серый на CSS
Kosten
Дата: Четверг, 2020-01-16, 20:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25966
Награды: 59


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

Для этого нам не нужно делать это вручную или задействовать графический редактор, такой как Photoshop. Изображение может быть напрямую отображено в градациях серого с использованием CSS. Преобразование изображения в черно-белое возможно с помощью свойства фильтра CSS. Мы используем CSS-функцию grayscale () в качестве значения.

Код
#someimg {
    filter: grayscale(1);
}

Оттенки серого grayscale() принимает число или процент указывает на количество конверсии требуется черно-белый. Значение 1 или 100% означает, что изображение будет полностью преобразовано в оттенки серого. При значении 0 или 0% изображение останется прежним. Значения между ними частично преобразуют изображение в черно-белое.

Код
#someimg {
    /* 50% grayscale */
    filter: grayscale(0.5);
}

Также: №1

Код
#someimg {
    /* 80% grayscale */
    filter: grayscale(80%);
}

Также: №3

Код
#someimg {
    /* no effect on image */
    filter: grayscale(0);
}

Если для фильтра grayscale() параметры не передаются, по умолчанию он равен 100%.
Страна: (RU)
Kosten
Дата: Четверг, 2020-01-16, 20:18 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25966
Награды: 59


В этом примере используйте filter: grayscale (100%), чтобы преобразовать картинку в заданный нами в оттенки серого.



Код
<!DOCTYPE html>
<html>
    <head>
  <title>ZorNet.Ru — сайт для вебмастера</title>
  <style>
   img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
   }
   h1 {
    color:green;
   }
  </style>
    </head>
    <body>
  <center>
  <h1>Ключевое слово</h1>
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
  width="500px" height="250px" alt="filter applied" />
  </center>
    </body>
</html>
Прикрепления: 8083227.png(89.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Преобразование изображения в серый на CSS (Перевод изображения в режим серого цвета производится в CSS)
  • Страница 1 из 1
  • 1
Поиск: