Задать вопрос
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

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

Есть некие этапы, например:
вы заказали товар, вы оплатили заказ, товар летит на самолете, товар скинули в море и т.д.
Каждый из них изображен картинкой цветной когда выполнен и градации серого, когда нет.
Тут все пока понятно, как сделать. Далее:
Есть некоторые этапы, которые имеют % выполнения. Хотел это визуализировать, то есть картинка будет частично цветной, частично серой.
Помогите выбрать технологию. Возможно есть плагины?
  • Вопрос задан
  • 781 просмотр
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@Atllantis
Слишком сложно думаете :)
Всё намного проще:
Берёте две картинки (цветную и чёрно-белую), ставите одну поверх другой и изменяя видимый размер одной картинки получаем "прогрессбар".
Ответ написан
@hoarywolf
положить бесцветную картинку на цветную, верхнюю бесцветную показывать частично, в зависимости от % выполнения, меняя ширину у DIVа с overflow: hidden?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Зачем извращаться если есть
filter: grayscale(100%);
и не только такой есть. фильтров много https://habrahabr.ru/post/144852/
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Можно воспользоваться svg - будет меньше весить. Для иконок идеально подходит.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы