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

问题描述：

我使用了部分透明的CSS sprites（即图像中的对象不透明，背景透明）。我想使用CSS或Javascript将图像变暗。我需要让图像改变黑暗程度，并且为每个黑暗程度制作单独的图像是不切实际的。使用CSS/Javascript使部分透明度变暗背景图像

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

这里基本上是我有：http://jsfiddle.net/PXU6j/2/

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

我不认为这可以做到。如果你正在使用矢量或其他的东西，但是如果你不能在上面加任何东西来使它变暗，我就不会看到它。我会很感兴趣，看看有人能想出一些东西。唯一能想到的就是创建一个黑色版本的图像，置于顶部，使用不透明度。 – Leeish 2013-03-14 03:08:03

答

这个什么：

对于每一个精灵，有只有一个其他图像是全黑的，但在相同的形状与原。剪影，如果你愿意的话。然后，做一个div容器，就像这样：

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

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

几乎我所想的。 – Leeish 2013-03-14 03:12:16

答

扔了它一个div那是黑色的alpha通道：

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

请注意，我用

background-color: #000000; 
opacity: 0.7;

，但你也可以使用

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

变化不透明，你会得到不同的阴影。

答

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

您可以使用类似Camanjs或Pixastic之类的画布操作，也可以使用css3 filters。这两种方法都不适用于非HTML5兼容的浏览器。

答

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-16 17:07:09

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

相关推荐