Как обесцветить картинку css

Как обесцветить картинку?

Есть свг картинка, надо её обесцветить (изменить цвет на белый)
т.к я использую реакт, я делаю импорт картинки как реакт компонента и могу прописать
и все, но почему-то с этой конкретной картинкой это не работает
как можно изменить цвет свг картинки белый с помощью может быть фильтров или с помощью маски, подскажите пожалуйста
https://codesandbox.io/s/crazy-currying-sg3yv7

Вопрос задан 09 дек. 2022
117 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Разработчик

Может быть вот это:

Ответ написан 27 февр.

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

Как пофиксти проблему с амперсантом?

1 подписчик
14 часов назад
65 просмотров

Черно белое изображение css: Обесцветить картинку CSS и CSS3 transitions – css3 — Как при помощи CSS сделать картинку черно-белой?

Создание черно-белых изображений из цветных с использованием CSS

Самый простой способ обесцвечивания цветного изображения — с помощью CSS. Обычно фильтр применяется к классу, так как нередко нужно создать одинаковый эффект у нескольких изображений:

img.desaturate

Задать класс изображению тоже просто:

Добавление фильтра SVG

Код CSS, показанный выше, работает во всех современных версиях браузеров, как на настольных компьютерах, так и на мобильных устройствах, включая браузер Microsoft Edge.

Чтобы добиться такого же эффекта в браузере Firefox до версии 35, понадобится использовать фильтр SVG, который создадим в отдельном файле под названием desaturate.svg. В этом файле будет следующий код:

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

Вместе с этим файлом SVG, находящимся рядом со страницей HTML и нужным изображением, код CSS дополнится такой строкой:

img.desaturate

Добавление поддержки браузера Internet Explorer

Чтобы эффект работал в браузере Internet Explorer от 6 до 9 версий, применим простой собственный фильтр корпорации Microsoft:

img.desaturate

Если нужно добавить поддержку устаревших версий браузеров на движке Webkit, расширим код таким образом:

img.desaturate

Этот способ не работает в браузерах Internet Explorer 10 и 11 версий. Если нужно создать одинаковый визуальный эффект совершенно во всех браузерах, можно воспользоваться решением на языке программирования Javascript для разных браузеров или, например, скриптом Greyscale.js.

Код CSS, написанный выше, позволяет нам на лету визуально преобразовать изображение в черно-белое в браузере, без необходимости в сохранении новых версий в программе Photoshop. С помощью кода CSS также можно гораздо проще изменять изображение: например, если уменьшить процент в значениях свойства фильтра со 100% до 50%, то мы получим смешение эффекта обесцвечивания и изначального цветного изображения.

Немного более простой подход для устаревших версий браузера Firefox предполагает включение кода SVG прямо в код CSS без необходимости добавлять что-то в отдельный файл и в тег :

img.desaturate < -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#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 Опубликовано 15.12.2019

Код 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:27

4 Ответов

Чтобы это выглядело действительно сладко, используйте jQuery и исчезайте между ними, ознакомьтесь с этим уроком от Soh Tanaka . (Похоже, что этот сайт сделал вариацию этого урока.)

Однако вы можете сделать это с помощью just css, создав изображение sprite и изменив положение фона на: hover

Поделиться locrizak 13 мая 2011 в 14:32

Вы также можете попробовать этот jquery плагин greyScale

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

EDIT: я рекомендую также этот черно-белый jQuery плагин от Gianluca Guarini : Это легче изменить css.

Поделиться Sébastien Gicquel 05 октября 2012 в 11:18

В своем ответе я обращаюсь только к созданию образа .

В вашем случае было бы лучше вручную предварительно отрисовывать ненасыщенные изображения с помощью Photoshop (etc).

Если вы не хотите вручную предварительно визуализировать ненасыщенные изображения, я бы рекомендовал использовать PHP (или любой другой серверный язык, который у вас есть), чтобы сделать это.

Если это не вариант, вы можете использовать JavaScript для создания ненасыщенных изображений, см.:

Поделиться thirtydot 13 мая 2011 в 14:49

Поделиться Nathan 13 мая 2011 в 15:46

Обесцветить картинку CSS и CSS3 transitions

Сегодня уже никого не удивишь красивыми эффектами на сайтах. Некоторые вот уже последние 10 лет делают это на Flash, другие — ещё не перестали делать на Javascript, но самые продвинутые уже давно используют CSS3. Вот этим мы сегодня и займемся.

Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво

Вот его мы и применим.

Решение: обесцветить картинку CSS

Сначала сверстаем саму картинку:

Затем пропишем для картинки стиль:

Теперь наша картинка станет черно-белой.

Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.

На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.

Анимировать обесцветить картинку CSS

Немного дополним наш предыдущий стиль:

img < -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ >img:hover < -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ >

img < -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ /*Добавим вот такой вот код*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; /*конец кода с transition*/ >img:hover < -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ >

Как сделать картинку черно белой css

Функция grayscale() превращает изображение в чёрно-белое.

Синтаксис

Обозначения

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

Значение 100% или 1 превращает изображение в чёрно-белое. Значение 0 оставляет изображение исходно цветным. Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.

Отрицательное значение не допускается. Пустое значение воспринимается как 0.

Обесцветить картинку CSS и CSS3 transitions

Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво

Итак, начнем с простого, нам нужны красивые фото, возьмём вот такое:

Вот его мы и применим.

Решение: обесцветить картинку CSS

Сначала сверстаем саму картинку:

Затем пропишем для картинки стиль:

Теперь наша картинка станет черно-белой.

Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.

На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.

Анимировать обесцветить картинку CSS

Немного дополним наш предыдущий стиль:

Ну вот и всё. А получилось у нас следующее (попробуйте навести на картинку ниже).

CSS свойство filter grayscale на практике

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

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

Например мы хотим заменить цветную фотографию на черно-белую при наведении курсора. Раньше потребовалось бы подготовить две фотографии: цветную и черно-белую и при наведении курсора, на месте черно-белой фотографии появлялась бы цветная. С появлением в CSS3 свойства filter, достаточно просто одной цветной фотографии и немного кода.

filter: grayscale(1); /* где 1 – оттенки серого цвета */

У нас будет следующая HTML структура: Создаем большой серый блок-контейнер с классом img-wrap, куда помещаем три блока .holder с фотографиями с классом img-1.

HTML код целиком:

Блоки с фотографиями встали в ряд, благодаря float:

CSS свойство filter grayscale на практике.

Как вы видите на первом скриншоте, для примера используются фотографии разного размера. Как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? Надо задать нужные вам размеры блока с картинкой, а что не помещается в блок holder, спрятать overflow: hidden.

CSS свойство filter grayscale на практике.

Чтобы наши барышни не выглядели, как на «доске почета», скруглим углы блока.

Изменим правила расчета ширины и высоты серого блока-контейнера. Что это значит? По умолчанию к размерам контента прибавляются ещё и размеры отступов, полей и бордюров. Но мы говорим, что не надо учитывать их при расчете ширины и высоты блока. Иными словами, если мы задаем ширину серого блока 780 пикселей, то никакие поля этот размер не изменят.

CSS свойство filter grayscale на практике.

Давайте посмотрим на полученный блок с фотографиями с точки зрения дизайна. Сейчас на сером фоне мы видим три разноцветных пятна, это выглядит безвкусно, нет никакой гармонии с фоном. Простыми строчками в файле стилей, сделаем картинки черно-белыми. Для этого применим наконец-то CSS filter grayscale с максимальным значением (1) или (100%).

CSS свойство filter grayscale на практике.

И завершающим этапом, сделаем так, что при наведении курсора, фотографии получат обратно свой оригинальный цвет.

Данный эффект с применением filter grayscale можно увидеть на демо.

Поддержка в браузерах

Не поддерживают старые браузеры, а также все версии IE. Chrome с 49 по 62 версии требует добавления префикса «-webkit-«.

CSS код целиком:

/* black and white hover effect */
.holder .img-1

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

Хорошая возможность привлекать и задерживать внимание на каких либо блоках или изображениях. Спасибо, не знал о таких фильтрах. Трансформирование не решало такую задачу, а фильтр реально манипуляции с кодом.

люблю лаконичный код. filter: grayscale(1);

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Эффекты для изображений на CSS

Фильтры CSS позволяют применять к изображениям эффекты, аналогичные фильтрам Photoshop.

Синтаксис свойства filter выглядит следующим образом:

Простой пример использования фильтра:

Параметры, которые может принимать свойство:

Размытие (blur) – эта функция размывает изображение. Чем больше значение, тем сильнее эффект размытия. Значение по умолчанию равно 0.
Яркость (brightness) – значение 0% сделает изображение абсолютно черным, 100% оставит его без изменений, а более – повысит яркость.
Контрастность (contrast) – значение 0% сделает изображение полностью серым, 100% оставит исходное изображение без изменений, больше – повысит контрастность.
Тень (drop-shadow) –создает эффект тени на изображении. Функция принимает один из следующих параметров:
- Горизонтальная тень (Н-shadow) – обязательный параметр. Он устанавливает смещение тени по горизонтали. Отрицательное значение задает сдвиг тени влево.
- Вертикальная тень (V-shadow) – обязательный параметр. Задает смещение тени по вертикали. Отрицательное значение сдвигает тень вверх.
- Цвет (color) – необязательный параметр. Если он не указан, браузер добавляет определенный цвет к тени.
- Растяжение (spread) – необязательный параметр. Устанавливается в пикселях. Положительное значение растягивает тень, а отрицательное – сжимает.
Исходное изображение, которое мы будем изменять с помощью фильтров CSS, выглядит следующим образом:

Filter: saturate

Первое значение свойства filter меняет цветовую насыщенность изображения.

Filter: grayscale

Ниже приведен пример использования CSS-фильтра grayscale:

Filter: sepia

Следующий пример демонстрирует эффект, полученный от применения фильтра sepia:

Filter: blur

Пример использования фильтра blur:

Filter: opacity

В следующем примере показано, как работает фильтр opacity:

Filter: invert

Следующий пример использует CSS-фильтр invert:

Filter: brightness

Ниже показан пример использования фильтра brightness:

Filter: contrast

Пример применения фильтра contrast:

Filter: hue-rotate

CSS-фильтр hue-rotate позволяет создавать удивительные эффекты. Пример использования функции с тремя разными параметрами:

Filter: shadow

Примеры использования фильтра shadow продемонстрированы ниже:

Комбинация фильтров

В примере, приведенном ниже, для получения эффекта инфракрасного изображения, используются два фильтра: hue-rotate и saturate:

Заключение

Приведенные выше примеры можно использовать в различных целях. В том числе и для создания новых впечатляющих эффектов. Надеюсь, что данное руководство поможет вам в этом.

Пожалуйста, оставьте ваши отзывы по текущей теме материала. За комментарии, отклики, лайки, подписки, дизлайки огромное вам спасибо!

Похожие публикации:
1. Как в css расположить элемент по центру
2. Как в css убрать расстояние между строками
3. Как сделать текст ниже css
4. Как сделать тень вокруг блока css