Изменение цвета PNG-изображения с помощью CSS?

Самая простая строка, которая сработала для меня:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Вы можете регулировать значение opacity от 0 до 1, чтобы сделать цвет светлее или темнее.

Думаю, у меня есть решение этой проблемы, которое a) именно то, что вы искали 5 лет назад, и b) немного проще, чем другие варианты кода здесь.

Используя любое белое PNG (например, белую иконку на прозрачном фоне), вы можете добавить селектор ::after для изменения цвета.

.icon {
    background: url(img/icon.png); /* Ваша иконка */
    position: relative; /* Позволяет позиционировать псевдоэлемент абсолютно */
}

.icon::after {
    position: absolute; /* Позиционирует псевдоэлемент относительно .icon */
    width: 100%; /* Такие же размеры, как у .icon */
    height: 100%;
    content: ""; /* Позволяет псевдоэлементу отображаться */
    background: #EC008C; /* Цвет, в который вы хотите изменить иконку */
    mix-blend-mode: multiply; /* Применяет цвет только на белом, используйте screen, если иконка черная */
}

Вот ссылка на CodePen (применение смены цвета при наведении): http://codepen.io/chrscblls/pen/bwAXZO

Когда вы пытаетесь изменить изображение из черного в белый или из белого в черный, фильтр поворота оттенка (hue rotate) не работает, поскольку черный и белый технически не являются цветами. Вместо этого изменения между черным и белым следует выполнять с помощью свойства фильтра инверсии.

Вот пример использования CSS для инверсии цветов:

.img1 {
  filter: invert(100%);
}

Этот подход корректно преобразует черный цвет в белый и наоборот, обеспечивая ожидаемый результат.

Я нашёл это, когда искал в Google, и это лучше всего сработало для меня...

HTML:

<div class="img"></div>

CSS:

.img {
  background-color: red;
  width: 60px;
  height: 60px;
  -webkit-mask-image: url('https://i.sstatic.net/gZvK4.png');
}

Вот пример на jsFiddle: http://jsfiddle.net/a63b0exm/

Если у вас возникнут вопросы, не стесняйтесь задавать их!

Для изменения цвета изображения с помощью CSS можно использовать свойство filter. Вот примеры фильтров для преобразования цвета изображения в разные оттенки:

1. Изменение цвета на белый:

   filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
   

2. Изменение цвета на красный:

   filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
   

3. Изменение цвета на зеленый:

   filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
   

4. Изменение цвета на синий:

   filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
   

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