使用CSS/Javascript使部分透明度的背景图像变暗

Question

我正在使用部分透明的CSS精灵(即图像中的对象是不透明的,背景是透明的).我想用CSS或Javascript来暗化图像.我需要让图像改变黑暗程度,为每个黑暗级别制作单独的图像是不切实际的.

如果不是透明背景,我可以在图像顶部添加黑色图层并更改该图层的不透明度.

这基本上就是我所拥有的:http://jsfiddle.net/PXU6j/2/

<!-- SO is forcing me to add code -->
<div class=logo>How do I make this darker?</div>

Answer 1

在它上面涂上一个黑色的alpha通道:

http://jsfiddle.net/PXU6j/3/

请注意,我用过

background-color: #000000;
opacity: 0.7;

但你也可以使用

background-color: rgba(0, 0, 0, 0.7);

不同的不透明度,你会得到不同的黑暗色调.

Answer 2

那这个呢：

对于每个精灵，只有一张全黑的图像，但形状与原始图像相同。剪影，如果你愿意的话。然后，创建一个容器 div，如下所示：

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

然后，您可以更改div.sprite元素的不透明度并达到您想要的效果。我知道这并不能真正解决问题，但我不知道除了使用 PHP 之外还有什么方法，它甚至不能完全解决问题。