9

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

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

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

1

3 ответа 3

15

Вы можете использовать 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

Демо: демо

11

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

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.sstatic.net/R8YjS.png">
<img alt="" src="//i.sstatic.net/R8YjS.png" style="filter: brightness(5);">
<img alt="" src="//i.sstatic.net/R8YjS.png" style="filter: brightness(10);">
<img alt="" src="//i.sstatic.net/R8YjS.png" style="filter: brightness(0) invert(1);">

0
4

Пример смены цветов на 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">

2
  • 1
    белый цвет так не получить
    – VaskM
    Commented 4 февр. 2017 в 13:23
  • 1
    @VaskM в вашем случае используйте лучше иконочный шрифт. Цвета иконок можно менять через CSS.
    – user232857
    Commented 4 февр. 2017 в 13:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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