html字体颜色无空格,对比度填充和空白背景的CSS进度条文本颜色？

我希望X

HTML CSS进度条在填充和空白背景区域之间具有对比色.

我的文字颜色有问题.因为填充和空白背景太对比(这是一项要求),为了保持可读性,文本应该是双色的,以便与它们两者形成对比.图像应该比文字更好地解释：@H_403_3@

我当前的进度条实现是微不足道的,但是如上面的例子所示,在某些情况下文本可能很难阅读,这正是我想要解决的问题.@H_403_3@

我当前(简化)的实现尝试(失败,因为溢出：隐藏不起作用而没有定位div.progress,由于内跨距的宽度,我无法定位)：@H_403_3@/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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;

}

这些图像是GIMP编辑的原型,而不是这段代码显示的内容.@H_403_3@

补充：谢谢大家,特别是Meep3D,Nosredna和Lachlan！但是我仍然有一个问题 – 在我的情况下,进度条应该没有固定宽度并占用所有水平可用空间(宽度：自动;或宽度：100％是可接受的).但没有宽度：400px规则Lachlan的代码中断.如果可能的话,我仍然希望避免使用JavaScript.@H_403_3@