Создание черно-белых изображений из цветных с использованием CSS
Самый простой способ обесцвечивания цветного изображения — с помощью CSS. Обычно фильтр применяется к классу, так как нередко нужно создать одинаковый эффект у нескольких изображений:
img.desaturate {
filter: grayscale(100%);
}Задать класс изображению тоже просто:
<img src="lena-söderberg.jpg" alt="Lena Söderberg">
Добавление фильтра SVG
Код CSS, показанный выше, работает во всех современных версиях браузеров, как на настольных компьютерах, так и на мобильных устройствах, включая браузер Microsoft Edge.
Чтобы добиться такого же эффекта в браузере Firefox до версии 35, понадобится использовать фильтр SVG, который создадим в отдельном файле под названием desaturate.svg. В этом файле будет следующий код:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter>
<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>Если код SVG выше выглядит слегка пугающе и массив в нем слишком сложен, не волнуйтесь. Это один из фрагментов кода, который мы советуем просто копировать и вставлять как стандартный рецепт для создания черно-белого изображения.
Вместе с этим файлом SVG, находящимся рядом со страницей HTML и нужным изображением, код CSS дополнится такой строкой:
img.desaturate {
filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}Добавление поддержки браузера Internet Explorer
Чтобы эффект работал в браузере Internet Explorer от 6 до 9 версий, применим простой собственный фильтр корпорации Microsoft:
img.desaturate{
filter: gray;
filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}Если нужно добавить поддержку устаревших версий браузеров на движке Webkit, расширим код таким образом:
img.desaturate{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
} Этот способ не работает в браузерах Internet Explorer 10 и 11 версий. Если нужно создать одинаковый визуальный эффект совершенно во всех браузерах, можно воспользоваться решением на языке программирования Javascript для разных браузеров или, например, скриптом Greyscale.js.
Код CSS, написанный выше, позволяет нам на лету визуально преобразовать изображение в черно-белое в браузере, без необходимости в сохранении новых версий в программе Photoshop. С помощью кода CSS также можно гораздо проще изменять изображение: например, если уменьшить процент в значениях свойства фильтра со 100% до 50%, то мы получим смешение эффекта обесцвечивания и изначального цветного изображения.
Немного более простой подход для устаревших версий браузера Firefox предполагает включение кода SVG прямо в код CSS без необходимости добавлять что-то в отдельный файл и в тег <body>:
img.desaturate {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><filter><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>#greyscale");
}Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Css сделать изображение черно белым
Как сделать элемент чёрно-белым и обратно цветным средствами CSS? Вот кроссбраузерный вариант создания чёрно-белого изображения или элемента из цветного.
Код CSS
Внимание! Возможно, Вы уже увидели строчку с
В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.
Достаточно просто создать файл grayscale.svg и добавить в него следующее:
ИЛИ (если хотим избежать создание дополнительного SVG-файла) добавляем к уже созданному классу строку:
Теперь его убираем обесцвечивание, то есть делаем элементом снова цветным. Например, при наведении курсора на элемент:
Код CSS
Пример работы, исходники — чёрно-белое изображение CSS
Добавляю к статье долгожданные пример работы и исходники.
Если в каком-то из браузеров не работает, напишите, пожалуйста. Буду дорабатывать)
Узнайте, как создать «черно-белое» изображение с помощью CSS.
Черно-белое изображение
Оттенки серого (100%)
Используйте свойство CSS filter для преобразования изображения в Черное и белое.
Пример в градациях серого
Изменить цвет всех изображений на черный и белый (100% серый):
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.
Перейдите в наш CSS Filter свойство, чтобы узнать больше о CSS фильтров.
Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.
В этой статье мы рассмотрим способы как сделать изображение серым.
1. CSS фильтр
Использование свойства filter, пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter.
Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.
Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:
Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.
2. Javascript
Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.
Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.
3. SVG
Другим способ является использование SVG фильтров.
Всё что вам нужно это создать SVG файл и использовать код ниже:
Затем необходимо связать SVG файл и ID:
Также весь код можно написать прямо в CSS:
Результат будет похожим.
Вывод
Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.
Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.
Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:
css сделать изображение черно белым
На чтение 3 мин. Просмотров 2 Опубликовано
Как сделать элемент чёрно-белым и обратно цветным средствами CSS? Вот кроссбраузерный вариант создания чёрно-белого изображения или элемента из цветного.
Код CSS
Внимание! Возможно, Вы уже увидели строчку с
В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.
Достаточно просто создать файл grayscale.svg и добавить в него следующее:
ИЛИ (если хотим избежать создание дополнительного SVG-файла) добавляем к уже созданному классу строку:
Теперь его убираем обесцвечивание, то есть делаем элементом снова цветным. Например, при наведении курсора на элемент:
Код CSS
Пример работы, исходники — чёрно-белое изображение CSS
Добавляю к статье долгожданные пример работы и исходники.
Если в каком-то из браузеров не работает, напишите, пожалуйста. Буду дорабатывать)
Узнайте, как создать «черно-белое» изображение с помощью CSS.
Черно-белое изображение
Оттенки серого (100%)
Используйте свойство CSS filter для преобразования изображения в Черное и белое.
Пример в градациях серого
Изменить цвет всех изображений на черный и белый (100% серый):
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.
Перейдите в наш CSS Filter свойство, чтобы узнать больше о CSS фильтров.
Привет. Сегодня уже никого не удивишь красивыми эффектами на сайтах. Некоторые вот уже последние 10 лет делают это на Flash, другие — ещё не перестали делать на Javascript, но самые продвинутые уже давно используют CSS3. Вот этим мы сегодня и займемся.
Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво
Итак, начнем с простого, нам нужны красивые фото, возьмём вот такое:
Нам нужно его обесцветить (обесцветить картинку CSS — убрать цвета, сделать картинку черно-белой). Для этого (да и вообще для работы с графикой) в CSS3 есть специальное средство filter.
Вот его мы и применим.
Решение: обесцветить картинку CSS
Сначала сверстаем саму картинку:
Затем пропишем для картинки стиль:
Теперь наша картинка станет черно-белой.
Можно, конечно, на этом остановится, но гораздо интереснее, когда картинка ещё и отвечает на действия пользователя.
Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.
На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.
Анимировать обесцветить картинку CSS
Немного дополним наш предыдущий стиль:
Это позволит картинке при наведении на неё мышкой, становится цветной. А ещё восмользуемся CSS3 transition, чтобы сделать процесс обесцвечивания анимированным:
Параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).
Ну вот и всё. А получилось у нас следующее (попробуйте навести на картинку ниже).
CSS: как превратить цветное изображение в серое или черно-белое изображение
Возможный Дубликат:
Преобразование изображения в оттенки серого в HTML/CSS
Как я могу превратить цветное изображение в серое или черно-белое изображение, подобное этому сайту с CSS?
Можно ли это сделать только на CSS или мне нужен JavaScript (jQuery)?
Спасибо.
Редактировать:
Спасибо за ответы, ребята. Я заметил, что трюк состоит в том, чтобы сделать два разных цветных изображения — одно полноцветное, а другое-b/w. я надеялся, что это можно сделать в одном единственном изображении. Так что нет никакого способа сделать это не отдельно от ‘trick’??
javascript jquery css grayscale Поделиться Источник laukok 13 мая 2011 в 14:274 Ответов
2
Чтобы это выглядело действительно сладко, используйте jQuery и исчезайте между ними, ознакомьтесь с этим уроком от Soh Tanaka . (Похоже, что этот сайт сделал вариацию этого урока.)
Однако вы можете сделать это с помощью just css, создав изображение sprite и изменив положение фона на: hover
Поделиться locrizak 13 мая 2011 в 14:32
2
Вы также можете попробовать этот jquery плагин greyScale
Эффект может быть достигнут с помощью одного изображения.
EDIT: я рекомендую также этот черно-белый jQuery плагин от Gianluca Guarini : Это легче изменить css.
Поделиться Sébastien Gicquel 05 октября 2012 в 11:18
1
В своем ответе я обращаюсь только к созданию образа .
В вашем случае было бы лучше вручную предварительно отрисовывать ненасыщенные изображения с помощью Photoshop (etc).
Если вы не хотите вручную предварительно визуализировать ненасыщенные изображения, я бы рекомендовал использовать PHP (или любой другой серверный язык, который у вас есть), чтобы сделать это.
Если это не вариант, вы можете использовать JavaScript для создания ненасыщенных изображений, см.:
http://www.pixastic.com/lib/docs/actions/desaturate/
Поделиться thirtydot 13 мая 2011 в 14:49
Поделиться Nathan 13 мая 2011 в 15:46
Похожие вопросы:
jQuery — черно-белое изображение для цветного изображения (наведение курсора мыши)
У меня есть черно-белое изображение, содержащееся в A css: http://cl.ly/3G0E0g1e2G2h4k3U3F2O В тот же файл я вставил цветное изображение: http://cl.ly/1l2A2F0o1j3E1z2s223V Теперь я хочу, чтобы при…
Определите, является ли изображение цветным, полутоновым или черно-белым с помощью Python/PIL
Я извлекаю изображения страниц из файла PDF в формате jpeg, и мне нужно определить, является ли каждое изображение намного более серым, цветным или черно-белым (с коэффициентом допуска). Я нашел…
Как преобразовать изображение в черно-белое в PHP
Как можно преобразовать изображение в черно-белое в PHP? Не просто превратить его в оттенки серого, а каждый пиксель сделать черным или белым?
Как преобразовать цветное изображение в черно-белое с помощью функции Javascript?
Как преобразовать цветное изображение в черно-белое, используя только Javascript? AND, а также сделать его кросс-совместимым в большинстве браузеров, потому что я слышал, что Internet Explorer имеет…
как сделать цветное изображение черно-белым в Android
Я хотел узнать, как преобразовать цветное изображение (которое я загружаю из сети) в черно-белое, когда я показываю его пользователю в android. может ли кто-нибудь найти это требование в любой из…
Как преобразовать цветное изображение bitmap в black&white изображение bitmap в android?
В моем приложении для чтения визитных карточек android мне нужно преобразовать цветное изображение bitmap в Черное & белое изображение bitmap (не серое изображение масштаба) для чтения текста…
Iphone преобразование цветного изображения в 2-битное изображение (черно-белое)
Мне нужна помощь, чтобы преобразовать цветное изображение в черно-белое, а не в оттенки серого. Я что бы сделать это с iPhone SDK и Core Graphics, так как я убежден, что это возможно.
Использование python PIL для превращения изображения RGB в чистое черно-белое изображение
Я использую библиотеку изображений Python для некоторых очень простых манипуляций с изображениями, однако у меня возникли проблемы с преобразованием серого изображения в монохромное (черно-белое)…
Как создать цветное изображение наведение курсора мыши на черно-белые изображения (в JQuery)
Мне интересно, есть ли какие-либо хорошие решения, доступные для превращения цветного изображения в черно-белое твердое состояние и позволяющие ему переходить обратно в цветное изображение при…
Сегментируйте частицы в черно-белое изображение
Может ли кто-нибудь помочь мне превратить это изображение в черно-белое (не в оттенках серого) изображение, где его частицы черные, а фон белый? (или наоборот). Это не так просто, как пороговое…