I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is. Is that possible in CSS?
You can use
filter: brightness(0) invert(1);
html {
background: red;
}
p {
float: left;
max-width: 50%;
text-align: center;
}
img {
display: block;
max-width: 100%;
}
.filter {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
<p>
Original:
<img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
Filter:
<img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>
First, brightness(0)
makes all image black, except transparent parts, which remain transparent.
Then, invert(1)
makes the black parts white.