我可以将div的背景设置为填充到2个不同％的两个不同的图像吗？

Question

在浏览W3Schools之后，我仍然不确定这是否可行。

我们的想法是让div成为进度条。 （是的，我知道jQuery UI的进度条。）我希望它开始100％填充一个背景图像，但加班时它从0％/ 100％填充到100％/ 0％。

我看到可以使用css：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

指定多个背景图像

但我不确定如何将该逻辑扩展为只有％宽度。有任何想法吗？感谢

Answer 1

您无法设置背景图像的宽度。但解决方案很简单。 div本身是0％的进度条（卸载的背景图像也是如此），然后在内部有另一个div，它是实际的进度（从0％到100％的动画并加载了背景图像）。因此，您可以设置进度条中

内部div 的宽度来表示进度。

答案 1 :(得分：1)

此站点有一些使用div中的span的示例：

http://css-tricks.com/css3-progress-bars/

它不使用图像（只是CSS3），但你可以轻松更新它在span和div上都有背景图像。 CSS3允许多个背景图像（http://www.css3.info/preview/multiple-backgrounds/），但我不确定它是否适用于您的示例。

答案 2 :(得分：0)

使用position: absolute;或position: relative;，可以将一个图像与另一个图像叠加在一起;不过，你必须小心z-index。然后，您可以使用jQuery的animate()函数为您想要充当“进度表”的图像的宽度设置动画，就像这样（假设您的进度表图像宽度从0px开始并最终到达100像素）：

$("#progress_meter").animate( {"width": "100px"}, 5000);

答案 3 :(得分：0)

不，但你可以在初始div的顶部设置另一个div并具有更高的z-index属性。

例如，在下面的代码中，div-a将位于div-b之上：

.div-a {
    with: 50%;
    height: 30px;
    z-index: 2;
}

.div-b {
    width: 100%;
    height: 30px;
    z-index: 1;
}

Answer 2

此站点有一些使用div中的span的示例：

http://css-tricks.com/css3-progress-bars/

它不使用图像（只是CSS3），但你可以轻松更新它在span和div上都有背景图像。 CSS3允许多个背景图像（http://www.css3.info/preview/multiple-backgrounds/），但我不确定它是否适用于您的示例。

Answer 3

使用position: absolute;或position: relative;，可以将一个图像与另一个图像叠加在一起;不过，你必须小心z-index。然后，您可以使用jQuery的animate()函数为您想要充当“进度表”的图像的宽度设置动画，就像这样（假设您的进度表图像宽度从0px开始并最终到达100像素）：

$("#progress_meter").animate( {"width": "100px"}, 5000);

Answer 4

不，但你可以在初始div的顶部设置另一个div并具有更高的z-index属性。

例如，在下面的代码中，div-a将位于div-b之上：

.div-a {
    with: 50%;
    height: 30px;
    z-index: 2;
}

.div-b {
    width: 100%;
    height: 30px;
    z-index: 1;
}