Darken background images with partial transparency using CSS/Javascript

css, javascript

Solution

What about this:

For each sprite, have only one other image that is completely black, but in the same shape as the original. A silhouette, if you will. Then, make a container div, like so:

<div class="silhouette">
    <div class="sprite"></div>
</div>

Then, you can alter the opacity of the `div.sprite` element and achieve the effect you want. I understand this doesn't truly solve the problem, but I don't know of another way short of using PHP, which doesn't even solve the problem in full either.

Problem

I'm using partially transparent CSS sprites (i.e. the object in the image is opaque, the background is transparent). I want to darken the image using CSS or Javascript. I need to make the images change levels of darkness and it's impractical to make a separate image for each level of darkness. If it wasn't for the transparent background, I could've added a black layer on top of the image and change the opacity of that layer. Here's basically what I have: http://jsfiddle.net/PXU6j/2/ ``` <!-- SO is forcing me to add code --> <div class=logo>How do I make this darker?</div> ```

Original source