透明背景进度条？

我试图找到一个透明背景的动画进度条。我宁愿使用JQuery，Javascript和/或CSS来实现它。这可能吗？我很想这样的事情：http://www.fcm.travel/progress_bar.gif有没有人遇到过这样的事情？透明背景进度条？

我在这里看到的其他问题显示静态栏，没有什么动画很像这个例子。

2011-03-15 Skizit

你为什么不只是使用纯CSS，让您的进度栏透明，很多怎么办资源的有它 – 2011-03-15 21:46:41

编辑我的问题，使我想要更明显。对不起 – Skizit 2011-03-15 21:49:38

忘记这些人好问题，+1好友。 – 2011-03-15 21:52:24

我不知道你所说的透明的意思，但jQuery用户界面有一个进度条：http://jqueryui.com/demos/progressbar/#animated

2011-03-15 21:46:46

技术上，动画PNG将整齐此。然而，我上次检查时对它的支持并不那么宽。

所以，你可以做什么，看你是开放的JavaScript解决方案，是创建一个基于24位PNG的精灵图像，因此它具有很好的透明度，包含动画的每个状态。然后用JavaScript和足够好的定时器/时间间隔，只需更改图像的背景位置，使其看起来像展示实时动画。

2011-03-15 21:48:42 CharlesLeaf

例如，StackOverflow标志是一个更大的图像集合的裁剪，您可以在这里查看：http://sstatic.net/stackoverflow/img/sprites.png?v=3 – 2011-03-15 21:51:33

你可以用CSS做任何透明的东西。下面让75％的不透明度（25％透明）

style="opacity: .75; filter: alpha(opacity=75)"

（额外的过滤规则是IE）

编辑：如果你关心，它的作品尽可能经常在旧的浏览器，你会增加老-webkit-和-moz-规则

style="opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; -webkit-opacity: .75"

在浏览器不支持不透明度设置时，它会自动回到默认100％不透明度这是不是在所有

透明或半透明

2011-03-15 21:50:05

有一个用于mozilla我是确保它的-moz-opacity（）+1为完美anwser。 – 2011-03-15 21:51:49

我在'-moz-'和'-webkit-'规则中编辑过。 Firefox和Chrome不需要前缀，并且在一段时间内不需要它。我没有测试Safari或更旧的版本。 @Steven – 2011-03-16 12:54:18

我刚做的东西，将您感兴趣的前几天，看看这个progress bar

2011-03-15 22:17:21

回答