Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?
P.S: нагуглил про filter: hue-rotate()
, но с белым цветом это походу не вариант.
<img src="https://vk.com/images/icons/head_icons.png">
Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?
P.S: нагуглил про filter: hue-rotate()
, но с белым цветом это походу не вариант.
<img src="https://vk.com/images/icons/head_icons.png">
Вы можете использовать css-фильтры:
Примечание: фильтры можно комбинировать между собой
.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
Демо: демо
Если фон прозрачный, то можно выкрутить картинке яркость. Например:
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);">
Пример смены цветов на 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">