7

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

4 回答 4

12

将一个带有 alpha 通道的黑色 div 放在它上面：

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

请注意，我使用

background-color: #000000;
opacity: 0.7;

但你也可以使用

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

改变不透明度，你会得到不同的暗度。

于 2013-03-14T03:14:46.187 回答
3

那这个呢：

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

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

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

于 2013-03-14T03:10:00.090 回答
1

没有跨浏览器兼容的解决方案。

您可以使用Camanjs或Pixastic 之类的画布操作，也可以使用css3 过滤器。这些方法都不适用于非 html5 兼容的浏览器。

于 2013-03-14T03:32:51.240 回答
1 
Try this:

<!DOCTYPE html>
<html>
    <head>
        <script src="/assets/js/jquery-1.10.2.min.js"></script>
    </head>

    <body>

        <style>
            #testarea1, #testarea2 {
                position:absolute;
                background-color: #666;
                width: 200px;
                height: 200px;
            }
            #testarea2 {
                display: none;
            }
        </style>

        <script>

            $(document).ready(function(){

                $("#testarea1").mouseover(function(){
                    $("#testarea2").css("background-color","yellow");
                    $("#testarea1").fadeOut(500);
                    $("#testarea2").fadeIn(1500);
                });

                $("#testarea2").mouseout(function(){

                    $("#testarea1").css("background-color","#666");
                    $("#testarea2").fadeOut(500);
                    $("#testarea1").fadeIn(1500);
                });

            });

        </script>

        <p>Hover to see effect</p>
        <div id="testarea1">displayarea1</div>
        <div id="testarea2">displayarea2</div>

    </body>

</html>
于 2013-10-16T16:43:42.613 回答