Как через css изменить цвет png изображения?

#css #цвета

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?
P.S: нагуглил про filter: hue-rotate(), но с белым цветом это походу не вариант.







    

Ответы

Ответ 1

Вы можете использовать css-фильтры:


grayscale конвертирует цвета в ч/б
sepia создает эффект сепии
saturate задает насыщенность
hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота
определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового.
Значение задается в градусах (0deg — 360deg)
invert инвертирует цвета
opacity задает прозрачность элемента 
brightness изменяет яркость изображения
contrast изменяет контрастность изображения
blur создает эффект размытости
drop-shadow создает тень


Примечание: фильтры можно комбинировать между собой



.bg{
  background-color: #8fbd35;
  padding: 20px;
  }

.fl{
  filter: invert(1);
}

  


  





Материал для прочтения: habrahabr

Демо: демо


Ответ 2

Если фон прозрачный, то можно выкрутить картинке яркость. Например:

filter: brightness(10);


Но остаётся некоторая неуверенность, до какого же уровня выкручивать, чтобы наверняка
исчезли все оттенки, кроме белого. А вот brightness(0) даст полностью чёрную картинку,
которую легко инвертировать:

filter: brightness(0) invert(1);


http://codepen.io/glebkema/pen/dNKGXZ



body { background: #ccc; }
img { display: block; }






Ответ 3

Пример смены цветов на CSS:



@keyframes hue {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(-360deg);
    }
}

.hue {
    animation: hue 10s infinite linear;
 }