How to make an all-white PNG image with CSS only?

Asked

Viewed 917 times

6

I have an image, which is the client’s logo, all colored. At times, I need this completely white logo, to apply on dark backgrounds.

I don’t always want to have to use two Pngs and I wonder if you can do it just for CSS.

I would like a result similar to that:

imagem colorida

img{
  background-color: #222;
}
<img src="https://i.stack.imgur.com/3cz57.png">

You can only do this with CSS?

css
  • 1

    I like SVG+xlink (tagged <use>), but the question is PNG :)

  • 4

    So you prefer to always upload a larger file and modify with CSS (without great support, and in an unreliable way, as can be verified in the proposed solutions) than to use a more compact one in some situations?

  • It’s a good question of yours, but at least it’s worth learning about CSS. Maybe evaluating well makes sense to use one. Although anyway, the file is already loaded once on the page.

2 answers

10


Create a class called .branca to use whenever you want the empty avatar. Use the properties of filter of the CSS, brightness(100) and ready, this will increase the brightness of the image and "pop" the white (as the photographers say), enough to make it white. If you want black, trade it for brightness(0) and will totally take out the brightness of the image.

m

Here you can consult the support of browsers. Obviously it doesn’t work on IE.

body {
  background-color: red;
}

.branca {
  filter: brightness(100);
}
.preta {
  filter: brightness(0);
}
<img class="" src="https://i.stack.imgur.com/uzMCi.png">
<img class="branca" src="https://i.stack.imgur.com/uzMCi.png">
<img class="preta" src="https://i.stack.imgur.com/uzMCi.png">

Here is a sandbox for you to test CSS filters.

OBS: It is interesting to test on deferent images to make sure that this technique will work in all cases, with small and large images. gif, . png, . bmp, . tif, . wmf or qq other format that has transparency and is interpreted by the browser...

  • 1

    I had seen an answer I used filter: brightness(0) invert(1) :)

  • 2

    @Wallacemaxters haha had yes , but it was unnecessary the invert, since only with Bright I can "burst" the brightness until it turns white.

  • 6

    It is worth remembering that it is not a very reliable technique, the example itself has spots in the final result. And that’s because the color image still doesn’t have that much contrast. Besides, it triggers the Antialias, depending on the type of image

  • 2

    @Bacco yes if you zoom in on the image is not very good at all, but the image resolution itself no longer helps. Let’s see if another option appears. I am thinking here of another way, but even if it works the support would be even less than the filter. But it changed from 10 to 100 and stained them well

-5

I don’t think it is possible to do image editing with css. Some effects can get you close to where you want to go.

Although I ran away from what you asked. My solution to the problem would be to export a logo to svg. As svg you can change the color of the element as if it were a font with the color property of css. So you are not limited to black and white.

Another solution with css is to invert the image colors with 'filter'.

https://davidwalsh.name/invert-colors-css

  • This does not answer the question. When you have reputation enough, you’ll be able to leave comments on any post but until then, write only answer that no depend on more information of who asked. - Of Revision

  • The link does not answer the question of how to execute an effect that changes from black to white and vice versa as requested?

  • 1

    Friend response per link is not allowed on the site for the simple fact that this link may cease to exist at any time, so Stackoverflow content must be contained here inside and not on a third party link where there is no control. In addition the link you posted is in English, something else is not allowed here, since we are the PT community of Stackoverflow....

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.