使用JavaScript和＆amp ;;使用2个图像创建进度条。 CSS

Question

基本上我想要实现的是创建一个使用2个图像的进度条。 （一个灰度和一个彩色）。试图将这两个div放在一起并放在一起然后动态修改这些x位置和宽度。但面临问题，把它们放在一起。我会采用正确的方法吗？任何其他实现这一目标的方法也是受欢迎的。

Answer 1

这适用于所有浏览器：

<强> 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/

Answer 2

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

尝试像这样组织你的div？