• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Преобразование цветного изображения в CSS (Преобразование изображения в оттенки серого в HTML и CSS)
Преобразование цветного изображения в CSS
Kosten
Дата: Пятница, 2019-04-05, 22:34 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Если кто не знает, то можно сделать преобразование из разноцветного изображения или картинки в оттенок серого цвета, где все создается с помощью CSS3. Где совершенно нет не какой необходимости для сохранения отдельные цветные и полутоновые изображения, которые затем могут отображаться для различных целей.

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

Код CSS для цвета в градациях серого



HTML

Код
<img src="http://zornet.ru/_fr/78/9953396.png">


CSS

Код
img {
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
}


Первая строка предназначена для Internet Explorer 6–9, вторая для Firefox, а фильтр веб наборов для Google Chrome, Safari и Opera.

Несмотря на обещание кросс-браузерной функциональности, могут возникнуть некоторые проблемы, особенно с более поздними версиями Internet Explorer, Safari и Opera.

Оттенки серого в цвет при наведении

Может быть полезно восстановить цвет до версии в оттенках серого, когда пользователь наводит курсор на изображение с помощью курсора.

Код
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}


Чтобы отменить эффект, то есть отобразить цветное изображение и преобразовать его в оттенки серого только при наведении курсора на него, просто поменяйте местами код. Другими словами, img: hover будет содержать код для фильтрации в оттенках серого.

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

Альтернативный код CSS

Другой вариант - создать серый наложение div и изменить непрозрачность. Однако это не настоящий эффект оттенков серого, но, тем не менее, стоит рассмотреть.

CSS

Код
#myImage {
opacity: 0.4;
filter: alpha(opacity=40);
}
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40);
background-color: #000;
}


Теперь просто поместите изображение в div следующим образом:

HTML

Код
<div id="wrapper"> <img id="myImage" src="http://zornet.ru/_fr/78/0895049.png"/></div>


Этот код мог бы работать так же хорошо для цветного фильтра по изображению, а не только для эффекта потемнения.
Прикрепления: 6991154.jpg(17.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Преобразование цветного изображения в CSS (Преобразование изображения в оттенки серого в HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: