Добавление цветового тона к изображению в оттенках серого (или к изображению, преобразованному в оттенки серого) — популярный и элегантный способ придания визуального единообразия группе фотографий, выполненных в совершенно непохожих стилях. Часто этот эффект применяется статически и убирается по событию :hover и/или при других вариантах взаимодействия с изображением. Традиционно мы создаем две версии изображения в графическом редакторе и добавляем немного простого CSS-кода, задача которого — подменять одну версию другой. Этот подход работает, но он раздувает исходный код и требует дополнительных HTTP-запросов, а сопровождать такой веб-сайт — это настоящая головная боль. Представьте, что было принято решение изменить цвет, использующийся для создания этого эффекта. Вам придется перебрать все изображения и создать для каждого новую монохромную версию! Другие подходы включают наложение полупрозрачного цвета поверх изображения или изменение степени непрозрачности изображения и наложение его на подложку сплошного цвета. Однако это не настоящий тон: в таком решении не только цвета изображения не преобразуются в оттенки целевого цвета, но и существенно снижается контрастность. Читать далее
