CSS进度条文本颜色用于对比填充和空白背景？
https://stackoverflow.com/questions/1080708
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想要 XHTML+CSS 进度条，在填充和空白背景区域之间具有对比色。
我的文本颜色有问题。由于填充背景和空白背景对比度太高（这是一项要求），为了保持可读性，文本应该是双色的，以便与它们形成对比。图片应该比文字更好地解释它：
带有深蓝色填充区域和白色空白背景的进度条http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png 问题示例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 规则拉克兰的密码破解。如果可能的话，我仍然想避免使用 JavaScript。
解决方案
作为每Meep3D的建议，以文本的2个拷贝。
在相同的宽度为容器的一个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>
其他提示
怎么样把进度条的文本的第二个副本的DIV中，并设置div的溢出隐藏的，所以它揭示了呢？
-
更新：我也没有一个javascript专家，但我相信你可以找到一个对象的宽度，然后设置偏移基于的是，如果宽度是灵活的，你说的
你可以：
- 找到适合的灰色
- 使用 JavaScript 根据位置动态更改白色和黑色之间的颜色
- 使背景渐变的中间颜色更接近白色，并始终使用深色文本
- 把进度放上去 奥蒂斯德 盒子：
[######### ] 50 %
您可以使用文字阴影为贵“百分比”文本。唯一的缺点是，它只会在最新的浏览器。只有火狐3.5，Safari浏览器（所有版本），和铬2+支持它。
下面是一个方式，将让你的进步可读使用文字阴影的演示。点击 http://www.w3.org/Style/Examples/007/文字阴影＃白色
如果你愿意使用更多的JavaScript，你可以试试这个jQuery插件：
http://kilianvalkhof.com/2008/的JavaScript /文字阴影合即与 - 的jquery /
文章称，在IE中只，但它工作在三价铬（我使用的是什么），火狐3.5，IE浏览器和Safari。它可以在旧的浏览器工作，但我没有测试过。
Meep3D 有正确答案。盒子的两个版本。显示顶部的 n%。
更多的选择：
- 将一个半透明的盒子放在数字下，以使白色数字变暗，或者使黑色数字的区域减轻区域。
- 使用红色和白色作为背景和黑色数字。（这里的问题是红色与错误相关联，因此您可以使用三种颜色的其他组合都互相互动。）
