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

我正在使用部分透明的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>

解决方法

那这个呢：

对于每个精灵,只有一个其他图像是完全黑色的,但形状与原始图像相同.如果你愿意,一个剪影.然后,创建一个容器div,如下所示：

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

然后,您可以更改div.sprite元素的不透明度并实现所需的效果.我理解这并没有真正解决问题,但我不知道使用PHP的另一种方式,它甚至都没有完全解决问题.

原文地址：https://www.jb51.cc/css/215420.html