进度指示文字自适应背景

作者:chilleen 来源:ITPOW(原创) 日期:2006-8-26

看了卡拉 OK 字幕效果,让我们来看看两个层的另一种应用--进度条,这里主要看进度条的进度指示文字自适应背景,假如进度条是白色,指示文字为黑色,已经进行了的部分为蓝色,指示文字为白色,那么在进度条为 50% 时,应该文字 5 和 0 的左半边为白色,0 的右半边和百分号为黑色。还是通过两个层来实现这个效果,除了卡拉 OK 字幕效果中提出的注意事项外,这里还需要注意:

  • 利用 padding 将指示文字确定在进度条中央附近。
  • 在10% 以下的进度指示时,在文字前面添加两个空格,在 100% 以下的进度指示时,在文字前面添加一个空格,保证它们和 100% 的情况下,百分号的位置不变。
  • 由于加了边框,上层的 top 和 left 属性值有改变。


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

相关文章