Change background color of elements that already have a background image

Is there a way to alter the color or the "hue" of an HTML element that already has a background image associated?

I would like to display two elements on the screen with the same background image, but I would like to alter one of those elements to have a slightly different shade of the original image.

So far I have tried CSS but it only allows me to replace the background color altogether with a new one.

The only other way I can do this is by creating a new image, and alt开发者_开发技巧ering the original one in photoshop, and changing the hue on it. But that means I'll end up with two different images and I would like to avoid that if possible.

Make your background image a semi-transparent PNG, then set the background of your elements with something like this;

#element1 {background: #fff url(bgimage.png);}
#element2 {background: #00f url(bgimage.png);}

Your background color will show through the semi-transparent image allowing you to set the "hue" to whatever color you want.

This won't work in Internet Explorer 6, so you'll want to be careful with that.

You can also try making your image a little transparent.

Put the same image in 2 divs, and then making the background color of each div a little different.

(this will however need a fix for PNG in IE) http://www.twinhelix.com/css/iepngfix/

You cannot alter the color of a background image, unless:

• You make a transparent div and overlay it on top of the background-image
• Use a very long and complicated javascript (intensive on the browser)

You can use the css property opacity to alter the shade, but it only goes lighter.