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