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

【问题标题】：Can I set a div's background to be two different images filled to 2 different %'s?我可以将 div 的背景设置为填充到 2 个不同 % 的两个不同图像吗？
【发布时间】：2012-03-09 11:52:03
【问题描述】：

查看 W3Schools 后，我仍然不确定这是否可行。

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

我看到可以使用 css 指定多个背景图像：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

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

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您不能设置背景图片的宽度。但解决方案很简单。 div 本身是 0% 的进度条（未加载的背景图像也是如此），然后在其中有另一个 div 是实际进度（从 0% 动画到 100% 并具有加载的背景图像）。因此，您在进度条内设置 div 的宽度以表示进度。

【讨论】：

这是我通常的做法...也不需要任何 z-index。

【解决方案2】：

本网站有几个在 div 中使用 span 的示例：

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

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

【讨论】：

【解决方案3】：

使用position: absolute; 或position: relative;，可以将一张图片与另一张图片叠加；不过，您必须小心z-index。然后，您将能够使用 jQuery 的 animate() 函数为您想要充当“进度表”的图像的宽度设置动画，如下所示（假设您的进度表图像宽度从 0px 开始，到 100px 结束）：

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

【讨论】：

【解决方案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;
}

【讨论】：