Как обесцветить картинку css
Перейти к содержимому

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

  • автор:

Как обесцветить часть изображения?

Есть некие этапы, например:
вы заказали товар, вы оплатили заказ, товар летит на самолете, товар скинули в море и т.д.
Каждый из них изображен картинкой цветной когда выполнен и градации серого, когда нет.
Тут все пока понятно, как сделать. Далее:
Есть некоторые этапы, которые имеют % выполнения. Хотел это визуализировать, то есть картинка будет частично цветной, частично серой.
Помогите выбрать технологию. Возможно есть плагины?

  • Вопрос задан более трёх лет назад
  • 763 просмотра

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

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

Слишком сложно думаете 🙂
Всё намного проще:
Берёте две картинки (цветную и чёрно-белую), ставите одну поверх другой и изменяя видимый размер одной картинки получаем «прогрессбар».

Ответ написан более трёх лет назад

Нравится 4 3 комментария

webinar

Максим Тимофеев @webinar Автор вопроса

Думал об этом, но не совсем вижу как изменить размер картинки в %, что бы не исказить ее.

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

Обычно изображение для сайта готовят в графическом редакторе и в нём уже задают яркость, контрастность и другие параметры картинки. С помощью CSS этот процесс можно упростить и менять цветность «на лету», к примеру, при наведении указателя на изображение. Для этого используем свойство filter и функцию grayscale(1) для создания чёрно-белой картинки и grayscale(0) для цветной. Чтобы всё это менялось плавно и красиво, добавляем свойство transition с указанием времени перехода (пример 1).

Пример 1. Чёрно-белая картинка

Картинка .grayscale < filter: grayscale(1); transition: 1s; >.grayscale:hover

Результат данного примера показан на рис. 1.

Изменение цветности картинки при наведении

Рис. 1. Изменение цветности картинки при наведении

В браузере Internet Explorer свойство filter не работает.

См. также

  • backdrop-filter
  • filter
  • Фильтр
  • Функция blur()
  • Функция brightness()
  • Функция contrast()
  • Функция drop-shadow()
  • Функция grayscale()
  • Функция hue-rotate()
  • Функция invert()
  • Функция opacity()
  • Функция saturate()
  • Функция sepia()

Обесцвечивание логотипа или изображения при наведении курсора

grayscale CSS3

Обесцветить и анимировать изображение при наведении указателя мыши посредством стиля в CSS позволяет команда «filter».

Пример использования обесвеченного изображения-логотипа компании WEBIKA:

grayscale webika

Код элемента для вставки стиля в CSS c указанием атрибута :

.webika img < -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; >.webika img:hover

После того, как Вы добавили код в стиль CSS и присвоили атрибут class к необходимому элементу в структуре HTML сайта, Вы получите анимированное изображение, становящееся цветным при наведении курсора мыши.

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

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

  • Вопрос задан более года назад
  • 129 просмотров

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

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

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

vool

Разработчик

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

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

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

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

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

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

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • 39 минут назад
  • 6 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *