对比度填充和空白背景的CSS进度条文本颜色？

我想要XHTML + CSS进度条，在填充和空白背景区域之间使用对比色。对比度填充和空白背景的CSS进度条文本颜色？

我遇到文字颜色的问题。因为填充和空白的背景太对比（这是一个要求），为了保持可读性，文本应该是双色的，以便与它们对比。图像应更好地解释它比文字：

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

我目前的进度条的实现是微不足道的，但上面的例子所示，文本可能难以在某些情况下阅读，而这正是问题我想解决。

我现在的（简化）实施尝试（失败，因为overflow: hidden不无定位div.progress工作，我不能因为内部span的width位置）：

<!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

图像是GIMP编辑的原型，并不完全代码显示。

地址：谢谢大家，特别是Meep3D，Nosredna和Lachlan！但是我仍然有一个问题 - 在我的情况下，进度条应该没有固定的宽度并且占据所有水平可用空间（width: auto;或width: 100%可接受）。但没有width: 400px规则Lachlan的代码中断。如果可能的话，我仍然希望避免使用JavaScript。

来源

2009-07-03 drdaeman

究竟是0％还是100％的问题呢？ – Nosredna 2009-07-03 20:19:26

要么是深蓝色背景上的黑色文字（很难阅读），要么是白色背景上的白色文字（无法阅读）。 – drdaeman 2009-07-03 20:20:22

我必须错过一些东西。为什么不在白色的时候使它变成白色而在深蓝色的时候使它变成白色呢？ – Nosredna 2009-07-03 20:21:35

按Meep3D的建议，采取的2份文本。

将每个包装在与容器宽度相同的div中。 “上”div与另一个div以所需百分比剪辑。

更新：删除固定的宽度。
“上”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>

来源

2009-07-04 12:43:34