Darkening an image with CSS (In any shape)

css png tint
Josiah picture Josiah · Apr 2, 2013 · Viewed 101.9k times · Source

So I have seen quite a few ways to darken images with CSS, including ones with rounded corners, but my problem is different.

Let's say I have an .png image that looks like a little dog (just go with it, I don't have any good examples), when I place it on my page, I give it dimensions of 100 x 100.

But I can't just overlay something on it, or tint the entire image, as it will cause the background of the dog to be tinted as well, which looks ugly.

Is it possible to tint an image of arbitrary shape with CSS?

(I'm assuming you understand my point, and useless code is not necessary)

Thanks!

Answer

The Whiz of Oz picture The Whiz of Oz · Dec 10, 2016

Easy as

img {
  filter: brightness(50%);
}

Related questions

Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More
Drop shadow for PNG image in CSS

I have a PNG image, that has free form (non square). I need to apply drop-shadow effect to this image. The standard approach ... -o-box-shadow: 12px 12px 29px #555; -icab-box-shadow: 12px 12px 29px #555; -khtml-box-shadow: 12px 12px 29px #555; -moz-box-shadow: 12px 12px 29px #555; -webkit-box-shadow: 12…

Read More
What is difference between png8 and png24

I want to know about uses of png files. There are two formats available for png images; one is png8 and the another one is png24. I would like to know that if I use either type in my html …

Read More