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

在浏览W3Schools之后，我仍然不确定这是否可行。我可以将div的背景设置为填充2个不同％的两个不同图像吗？

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

我看到它可能有多种背景图像指定使用CSS：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple

，但我不知道如何在逻辑扩展到只有％的宽度。有任何想法吗？由于

来源

2012-03-09 Sean Anderson

您不能设置背景图像的宽度。但解决方案很简单。 div本身就是0％的进度条（因此有未加载的背景图像），然后在实际进度（从0％到100％进行动画并具有加载的背景图像）内部有另一个div。因此，您可以使用里面的div 的宽度动画来表示进度。

来源

2012-03-09 03:47:15

这是我通常做的方式...不需要任何的z-index无论是。 – 2012-03-09 06:26:53

这个网站有使用一个div内的跨度的几个例子：

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

它不使用图像（只是CSS3），但你可以很容易地更新它有两个跨度的背景图片和div。 CSS3确实允许多个背景图片（http://www.css3.info/preview/multiple-backgrounds/），但我不确定它是否适合您的示例。

来源

2012-03-09 03:44:43

使用position: absolute;或position: relative;，可以将一个图像与另一个图像重叠;不过，你必须小心z-index。然后，您可以使用jQuery的animate()函数（如果您的进度表图像宽度从0px开始，最终以100px结束），您可以使用jQuery的animate()函数为要用作“进度表”的图像的宽度设置动画效果：

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

来源

2012-03-09 03:46:00

不，但您可以在初始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; 
}

来源

2012-03-09 03:52:03

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

回答

相关问题