3,制作进度条的第二种方式---直接使用图片+背景图片



0%

20%

50%

80%

100%

如果你想在上面进度条上添加进度显示的文字,你应该知道怎么办了(如果你仔细阅读过前面的例子的话)。
对,就是使用绝对定位+相对定位来控制。

0%
0%


20%
20%


50%
50%


80%
80%


100%
100%


这种方式的原理就是 利用 一张img图片,然后给img图片又设置背景图,通过背景图的background position 属性 来显示不同的部分。
当然这种方式 对图片有点要求 。你仔细一点就会发现,宽度是img的2倍。
另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。
总的来说,这应该算一个技巧,在实际项目中,也是能使用的。


Dev By CssRain.cn