Clever Geek Handbook

How to color the outlines of a png image using css?

I have the following image. I added it to my html and gave it a class name. Now I want to paint only the black outlines white. How can I do this using css?

enter image description here

+3


source to share


2 answers


You can achieve this 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>
Run code


+3


source


This is actually not possible with pure CSS.

To change the color of an image, there are two general solutions:



  • Use SVG to change color with CSS (see this link for more information).
  • Use the two images you created earlier and create a little script in the Javascript transition between these two images

The first solution is by far the best as you only need one SVG file and you can use simple CSS commands to achieve your desired result. However, if you are familiar with Javascript, the second option is pretty straightforward.

0


source






More articles:


All Articles