Как сделать картинку наполовину черно-белой?
1,00
р.
То есть как сделать половину (левую сторону) чёрно-белой, а вторую половину (правую сторону) цветной.
Я хочу использовать это для показа прогресса заполнения от 0% до 100%.
img { -webkit-filter: grayscale(100%) filter: grayscale(100%) }
Ответ
Вариант с помощью градиента и background-blend-mode: luminosity . Не работает в IE, Edge и Safari. (Спасибо VenZell за замечание.)
https://jsfiddle.net/glebkema/rrnubzah/
.progress { background-image: url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg), linear-gradient(90deg, #666 50%, transparent 50%) background-blend-mode: luminosity height: 400px width: 400px }
Я хочу использовать это для показа прогресса заполнения от 0% до 100%.
img { -webkit-filter: grayscale(100%) filter: grayscale(100%) }
Ответ
Вариант с помощью градиента и background-blend-mode: luminosity . Не работает в IE, Edge и Safari. (Спасибо VenZell за замечание.)
https://jsfiddle.net/glebkema/rrnubzah/
.progress { background-image: url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg), linear-gradient(90deg, #666 50%, transparent 50%) background-blend-mode: luminosity height: 400px width: 400px }
