如何用進度條填充透明圖像？ #CSS #HTML #Jquery？

我試圖用html和CSS填充30％的啤酒，這個進度條的技術csstricks。但我不知道是否有可能。如何用進度條填充透明圖像？ #CSS #HTML #Jquery？

我有一杯啤酒與透明度內容（插圖畫家PNG）的形象。你知道如果有可能在後臺有進度條嗎？我的測試都是無果而終:-(

還是我必須用另一種方法

非常感謝您的幫助

薩科

來源

2013-12-14 user3101788

輕鬆..只是試一下噸。 ip：position：absolute; z-index – Hardy

你去那裏：？！d（這是你可以用一些改建的CSS-招爲例）做什麼：演示：http://jsfiddle.net/djnBD/

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Fillable Beer Bottle</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script> 
     $(function() { 
      $(".liquid").each(function() { 
       $(this) 
        .data("origHeight", $(this).height()) 
        .height(0) 
        .animate({ 
         height: $(this).data("origHeight") 
        }, 1200); 
      }); 
     }); 
    </script> 

    <style> 
     .glass { 
      height: 200px; 
      position: relative; 
      background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */ 
      background-repeat: no-repeat; 
     } 
     .liquid { 
      z-index:-1; 
      position:absolute; 
      bottom:0; 
      width: 200px; 
      background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */ 
      /* Remove the bottom two lines to stop animation */ 
      -webkit-animation: move 150s linear infinite; 
      -moz-animation: move 150s linear infinite; 
     } 

     @-webkit-keyframes move { 
      0% { 
       background-position: 0 0; 
      } 
      100% { 
       background-position: 2212px 0px; 
      } 
     } 

     @-moz-keyframes move { 
      0% { 
       background-position: 0 0; 
      } 
      100% { 
       background-position: 2212px 0px; 
      } 
     } 

    </style> 
</head> 
<body> 
<div class="glass"> 
      <span class="liquid" style="height: 30%"></span> 
     </div> 
</body> 
</html>

來源

2013-12-14 10:01:22

是的，它是岩石！難以置信;-)非常感謝！代碼是神奇的;-) – user3101788

你知道如何僅在鼠標上啓動這個動畫：over？ – user3101788

你去了:) http://jsfiddle.net/djnBD/3/ –

如何用進度條填充透明圖像？ #CSS #HTML #Jquery？

回答

相關問題