Есть ли возможность в css \ js наложить цвет по форме изображения?

Есть определенные иконки, довольно большие (40-50 пикселов), и при наведении на них они должны окрашиваться полупрозрачным красным цветом. Проблема в том, что окрашиваться должна не область, а само изображение по его границам (png). Наиболее разумным является использовать спрайты, но проблема в том, что иконки могут быть совершенно рандомными, и любой должен иметь возможность загрузить любую иконку. Разумеется, для нее при наведении тоже должен быть такой эффект.

Итак, есть возможность реализовать подобный эффект? Может быть, есть готовые решения...
  • Вопрос задан
  • 4097 просмотров
Решения вопроса 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Вы почти ответили сами:
по его границам (png)

1. Задача - найти границы и сделать доп. изображение с обводкой. (на сервере)
2. Смените картинку на созданную сервером (с обводкой) при наведении "мышки" через onhover и поправкой центрирования (CSS).
PS: стандартного - пока ничего нет.
UPD: jsfiddle.net/0pnLL380/5
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@ultrbi4
Если иконки на белом фоне можно использовать filter: grayscale(), если нет, то нужно использовать canvas
Ответ написан
Комментировать
Symphony
@Symphony Куратор тега CSS
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Я так понимаю, проблема в том, что будет загружена картинка, например круг, а края будут прозрачны, так? И круг, скажем, зеленого цвета. А Вам при наведении надо окрашивать его в красный.
На мой взгляд тут два варианта:
1. Воспользоваться примером @Symphony, картинку с инвертированной прозрачностью создавать на сервере. Я не бэкэндщик, но уверен, что это не трудно сделать. А для подбора цвета картинки без наведения определять основной цвет картинки также на сервере.
2. Если загружаемая картинка имеет много цветов, то тогда уже использовать спрайт. На сервере создавать спрайт, в котором слева будет оригинал, а справа исправленная копия, где все не прозрачные пикселы будут иметь красный цвет.
Правда, боюсь, возникнут проблемы с антиалиасингом изображений.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы