There are png-icons, for example, from VC, blue. How to use css to change it to white?

PS: google about filter: hue-rotate() , but with white color this is not an option.

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

3 answers 3

You can use css-filters:

  • grayscale converts colors to b / w
  • sepia creates a sepia effect
  • saturate sets saturation
  • hue-rotate changes the image color depending on the angle specified. The angle of rotation determines how much a given color in a color wheel will change from red to violet. The value is set in degrees (0deg - 360deg)
  • invert inverts colors
  • opacity sets the opacity of the element
  • brightness changes the brightness of the image
  • contrast changes the image contrast
  • blur creates a blur effect
  • drop-shadow creates shadow

Note: filters can be combined with each other.

 .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>

Reading material : habrahabr

Demo: demo

    If the background is transparent, then you can unscrew the picture brightness . For example:

     filter: brightness(10);

    But there remains some uncertainty about the level to which to twist, so that all shades, except for white, probably disappear. But brightness(0) will give a completely black picture that is easy to invert :

     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);">

      Example of changing colors to 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">

      • white color does not get so - VaskM
      • one
        @VaskM in your case, use the iconic font better. Icon colors can be changed via CSS. - user232857