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

2243
06 февраля 2017, 17:08

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?

P.S: нагуглил про filter: hue-rotate(), но с белым цветом это походу не вариант.

<img src="https://vk.com/images/icons/head_icons.png">

Answer 1

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

@keyframes hue { 
    from { 
        filter: hue-rotate(0deg); 
    } 
    to { 
        filter: hue-rotate(-360deg); 
    } 
} 
 
.hue { 
    animation: hue 10s infinite linear; 
 }
<img class="hue" src="https://vk.com/images/icons/head_icons.png">

Answer 2

Вы можете использовать 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); 
}
<div class="bg"> 
  <img src="https://vk.com/images/icons/head_icons.png"> 
</div> 
<div class="bg"> 
  <img class="fl" src="https://vk.com/images/icons/head_icons.png"> 
</div>

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

Демо: демо

Answer 3

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

filter: brightness(10);

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

filter: brightness(0) invert(1);

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

body { background: #ccc; } 
img { display: block; }
<img alt="" src="//i.stack.imgur.com/R8YjS.png"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(5);"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(10);"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(0) invert(1);">

READ ALSO
css table tr:hover - выключить для определенных строк

css table tr:hover - выключить для определенных строк

Есть таблица на стилях, в стиле по умолчанию прописана подсветка строк tr:hover, все круто — удобно и работает, НО есть моменты, когда подсветка...

241
Быстрые квадратные корни

Быстрые квадратные корни

Нашел две заинтересовавшие меня статьи: 1, 2

286
Вывод форматированного текста в окно (C++, WinAPI)

Вывод форматированного текста в окно (C++, WinAPI)

В установщике пакета ПО нужно вывести длинный текстТекст надо растянуть по ширине, разместить по центру заголовок "ПОЛЬЗОВАТЕЛЬСКОЕ СОГЛАШЕНИЕ",...

465
Как правильно записать функцию чтения в буффер на с, c++

Как правильно записать функцию чтения в буффер на с, c++

Считать конкретное количество данных проблем нетРазмер данных, которые могут прийти не может быть больше чем buf_len

301