我的文字颜色有问题.因为填充和空白背景太对比(这是一项要求),为了保持可读性,文本应该是双色的,以便与它们两者形成对比.图像应该比文字更好地解释:
Progress bar with dark blue filled area and white empty background http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png
Example of the problem http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png
我当前的进度条实现是微不足道的,但是如上面的例子所示,在某些情况下文本可能很难阅读,这正是我想要解决的问题.
我当前(简化)的实现尝试(失败,因为溢出:隐藏不起作用而没有定位div.progress,由于内跨距的宽度,我无法定位):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <Meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Progress bar test</title> <style type="text/css"> div.progress_bar { border: 1px #ccc solid; position: relative; text-align: center; height: 32px; } div.progress_bar .progress { height: 32px; overflow: hidden; /* This does NOT work! */ } div.progress_bar .progress div { position: absolute; width: 100%; height: 32px; z-index: 30; overflow: hidden; background-color: #44a; } div.progress_bar span { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; color: #000; } div.progress_bar .progress span { position: absolute; top: 0; left: 0; width: 100%; z-index: 40; color: #eee; } </style> </head> <body> <!-- Can be of any (unknown) width. Think of "width: auto". The 400px value is just to keep it small on a big monitor. DON'T rely on it! --> <div id="container" style="width: 400px;"> <div class="progress_bar"> <!-- div.progress is a dark filled area container --> <div class="progress" style="width: 51%;"> <!-- Actually dark filled area --> <div style="width: 51%;"></div> <!-- Text (white). Does not clip,even with overflow: hidden on parent! --> <span>This is a test</span> </div> <!-- Text (black) --> <span>This is a test</span> </div> </div> </body> </html>
上面的现场版:http://drdaeman.pp.ru/tmp/20090703/test2.html
先前的尝试:http://drdaeman.pp.ru/tmp/20090703/test.html
补充:谢谢大家,特别是Meep3D,Nosredna和Lachlan!但是我仍然有一个问题 – 在我的情况下,进度条应该没有固定宽度并占用所有水平可用空间(宽度:自动;或宽度:100%是可接受的).但没有宽度:400px规则Lachlan的代码中断.如果可能的话,我仍然希望避免使用JavaScript.
解决方法
将每个包裹在与容器相同宽度的div中. “upper”div用另一个div包裹,该div以所需的百分比剪辑.
更新:删除固定宽度.
“upper”div的大小与其包装器的反比例大小相同.
<html> <head> <style type="text/css"> #container { position: relative; border: 1px solid; text-align: center; width: 400px; height: 32px; } .black-on-white { height: 32px; color: #000; } .white-on-black { height: 32px; color: #fff; background-color: #44a; } .wrapper { width: 53%; overflow: hidden; position: absolute; top: 0; left: 0; } .black-on-white { width: 100%; } .white-on-black { width: 188.7%; } </style> </head> <body> <div id="container"> <div class="wrapper"> <div class="white-on-black"> <span>This is a test</span> </div> </div> <div class="black-on-white"> <span>This is a test</span> </div> </div> </body> </html>