Darkening an image with CSS (In any shape)

Question

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 1

Easy as

img {   filter: brightness(50%); } 

Answer 2

You could always change the opacity of the image, given the difficulty of any alternatives this might be the best approach.

CSS:

.tinted { opacity: 0.8; } 

If you're interested in better browser compatability, I suggest reading this:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

If you're determined enough you can get this working as far back as IE7 (who knew!)

Note: As JGonzalezD points out below, this only actually darkens the image if the background colour is generally darker than the image itself. Although this technique may still be useful if you don't specifically want to darken the image, but instead want to highlight it on hover/focus/other state for whatever reason.