5

Возможно изменить цвет *.png иконки белого цвета, на любой другой цвет (к примеру, желтый) используя css?

Рассматривал решения, где вырезают иконку и подсвечивают фоном. Но это очень странное решение для типовой задачи. Обычно такой параметр называется tintColor, но в css не нашел подобного.

Пример картинки: https://i.stack.imgur.com/1B0hl.png

1
  • Уточните, что именно в png вы хотите перекрасить. Добавьте саму иконку в вопрос
    – Cheg
    20 сен 2017 в 21:10

4 ответа 4

5

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

.make-blue {
   filter: hue-rotate(180deg) brightness(0.5) saturate(600%);
}

.make-yellow-with-sepia {
   filter: contrast(50%) sepia(100%) hue-rotate(5deg) brightness(0.8) saturate(500%);
}
<img src="https://i.stack.imgur.com/FGN3Z.png">

<img src="https://i.stack.imgur.com/FGN3Z.png" class="make-blue">

<img src="https://i.stack.imgur.com/1B0hl.png" class="make-yellow-with-sepia">

Директиву может потребоваться продублировать с префиксом -webkit-.

4
  • Это решение отлично работает. Но что делать, если нужен цвет rgba(110, 180, 172, 1.0). По какой формуле вы вычисляете параметры для filter?
    – insFriZzz
    21 сен 2017 в 4:23
  • 1
    Получилось, используя следующую схему: Сначала перевел rgb в hsl. Потом подставил значения в формулу hue-rotate = h - 38 saturate = 100 + (24.5 - s) brightness = 100 + (l - 60.0) filter: brightness(50%) sepia(1) hue-rotate(hue-rotate) saturate(saturate%) brightness(brightness%);
    – insFriZzz
    21 сен 2017 в 6:15
  • Вопрос вычисления конкретного цвета по этой схеме заслуживает нового, отдельного, вопроса. В вашем исходном вопросе такого требования не было. Можно, кстати, самому ответить на свой вопрос.
    – sanmai
    21 сен 2017 в 6:17
  • вы правы, спасибо за ответ
    – insFriZzz
    21 сен 2017 в 6:18
2

Спасибо sanmai за подсказку. Чтобы перекрасить картинку в любой другой цвет, воспользовался следующей схемой:

filter: brightness(50%) sepia(1) hue-rotate(hue-rotate) saturate(saturate%) brightness(brightness%);

1

Но что делать, если нужен цвет rgba(110, 180, 172, 1.0). По какой формуле вы вычисляете параметры для filter?

Вы можете ничего не вычислять, но воспользоваться утилитой, которая преобразует выбранный цвет в комбинацию CSS фильтров:

Например жёлтый цвет:

filter: invert(85%) sepia(78%) saturate(6354%) hue-rotate(347deg) brightness(97%) contrast(106%);

введите сюда описание изображения

Допустим необходимо при наведении на иконку закрасить её из жёлтого в красный цвет:

img:hover {
filter: invert(85%) sepia(78%) saturate(6354%) hue-rotate(347deg) brightness(97%) contrast(106%);
}
img {
filter: invert(16%) sepia(100%) saturate(6087%) hue-rotate(2deg) brightness(115%) contrast(123%);
}
<img src="https://i.stack.imgur.com/1B0hl.png" class="make-yellow-with-sepia">

0

Можно через: filter: invert();

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.