使用JavaScript和CSS使用2個圖像創建一個進度條

Question

基本上我試圖實現的是創建一個進度條，使用2個圖像。 （一個灰度&一色）。試圖將這兩個div放在一起&然後動態修改它們的x位置和寬度。但面臨的問題是把它們放在一起。我會採取正確的方法嗎？任何其他方法來實現這一點也是受歡迎的。

Answer 1

<div id="one-hundred"> 
    <div id="percentage"> 
    </div> 
</div> 

試圖組織您的DIV這樣的嗎？

Answer 2

這將在所有的瀏覽器工作：

HTML

<div id="progress-container"> 
    <span></span> 
</div>​ 

CSS

#progress-container{ 
    background: grey; /* default background */ 
    width: 200px; 
    overflow: hidden; /* fit to the height of span */ 
} 
#progress-container span { 
    display: block; /* to enable width and height for this element */ 
    background: orange; 
    height: 15px; 
    width: 25%; 
} 

工作例如：http://jsfiddle.net/ZPffE/2/