javascript - 我可以将一个 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 宽度设置动画以表示进度。