带图像的进度条

时间:2013-08-01 16:17:56

标签: html html5 progress-bar progress

我想知道是否可以设置HTML5引入的Progress栏,以便我可以在其中放置图像。 更具体地说,让我们想象一下从一个城市到另一个城市的汽车。我想在进度条中显示汽车的演变。

<progress id='movingbar' value="50" max="200"></progress>

但为了更时尚,我希望这个进度条能够在“价值”的位置显示汽车的图像。

我没有找到任何网站讨论它。 如果使用HTML5标签无法做到这一点,那么可以采用其他方式吗?

事先谢谢

2 个答案:

答案 0 :(得分:0)

我做了类似的事情,我想要一个带有文本的进度条。文本跟随进度条。这样您就可以看到正在完成的任务。

你可以做到这一点,创造一个。保持是使用

width: [percentage of complete]%;
align: right;

您可以使用您想要的任何百分比继续更新宽度。您还可以在特定点更改汽车图像。这将需要大量的硬编码,但这是可能的。祝你好运

答案 1 :(得分:0)