2

I have the following image. I have added it in my html and given it a class name. Now I want to color just the black outlines to white. How can i do this using css?

enter image description here

Salman
  • 393
  • 1
  • 7
  • 23
  • Can you show us more details of the problem you are having? What specifically have you tried? – spencer.sm Aug 08 '17 at 14:06
  • 5
    You cannot: PNG is a bitmap image and it's pixel contents cannot be modified by CSS (unless you are talking about applying CSS filters). Technically you can simply use the `invert` filter, but that is assuming that the PNG is an image with black outlines and a transparent fill. Instead, you want to export the image as an SVG with a path. You can always change the path stroke color using CSS. – Terry Aug 08 '17 at 14:07
  • if you color the black outlines to white, wouldn't the image disappear? – chiliNUT Aug 08 '17 at 14:19
  • Possible duplicate of https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css else go for svg –  Aug 08 '17 at 14:20
  • Actually I am evetually adding this image as icon into my context menu which is black in color. So over the menu it will be evident. – Salman Aug 08 '17 at 14:21

2 Answers2

3

You can achieve this by using filter: invert(100%).

See CSS filters on MDN

But keep in mind, that there is only limited support so it won't work in all browsers. See: http://caniuse.com/#search=filter

.container {
  background-color: black;
  width: 35px;
  height: 35px;
  padding-top: 10px;
}

img {
    filter: invert(100%);

}
<div class="container">
<img src="https://i.stack.imgur.com/qiFDT.png">
</div>
Tom M
  • 2,815
  • 2
  • 20
  • 47
0

It is actually not possible with pure CSS.

To change an image color, there are two commons solutions :

  • Use SVGs to change color with CSS (See this link for more informations)
  • Use two images that you previously created and create a little script in Javascript switching between those two images

The first solution is surely the best, since you only need one SVG file, and you can use simple CSS commands to achieve the result you want. However, if you are familiar with Javascript, the second option is pretty simple too.

Louis 'LYRO' Dupont
  • 1,052
  • 4
  • 15
  • 35