使用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>

來源

2013-03-14 Leo Jiang

我不認爲這可以做到。如果你正在使用矢量或其他的東西，但是如果你不能在上面加任何東西來使它變暗，我就不會看到它。我會很感興趣，看看有人能想出一些東西。唯一能想到的就是創建一個黑色版本的圖像，置於頂部，使用不透明度。 – Leeish 2013-03-14 03:08:03

這個什麼：

對於每一個精靈，有只有一個其他圖像是全黑的，但在相同的形狀與原。剪影，如果你願意的話。然後，做一個div容器，就像這樣：

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

然後，您可以改變div.sprite元素的透明度，達到你想要的效果。我明白這並不能真正解決問題，但我不知道使用PHP的另一種方式，它甚至不能完全解決問題。

來源

2013-03-14 03:10:00

幾乎我所想的。 – 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);

變化不透明，你會得到不同的陰影。

來源

2013-03-14 03:14:46

沒有跨瀏覽器兼容的解決方案。

您可以使用類似Camanjs或Pixastic之類的畫布操作，也可以使用css3 filters。這兩種方法都不適用於非HTML5兼容的瀏覽器。

來源

2013-03-14 03:32:51

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 16:43:42

這是什麼問題？你能提供一些提示嗎？你有什麼嘗試？你在問什麼？ – 2013-10-16 17:07:09

使用CSS/Javascript使部分透明度變暗背景圖像

回答

相關問題