CSS进度条文本颜色，用于填充对比度和空白背景？
我想让XHTML+CSS进度条在填充和空白背景区域之间具有对比色 我对文本颜色有问题。由于填充背景和空白背景对比度太大（这是一项要求），为了保持可读性，文本应该是双色的，以便与两者形成对比。图像应该比文字更好地解释它： 我当前的进度条实现很简单，但正如上面的示例所示，文本在某些情况下可能很难阅读，这正是我想要解决的问题 我当前的（简化的）实现尝试（失败，因为CSS进度条文本颜色，用于填充对比度和空白背景？,css,text,progress-bar,effects,Css,Text,Progress Bar,Effects,我想让XHTML+CSS进度条在填充和空白背景区域之间具有对比色 我对文本颜色有问题。由于填充背景和空白背景对比度太大（这是一项要求），为了保持可读性，文本应该是双色的，以便与两者形成对比。图像应该比文字更好地解释它： 我当前的进度条实现很简单，但正如上面的示例所示，文本在某些情况下可能很难阅读，这正是我想要解决的问题 我当前的（简化的）实现尝试（失败，因为溢出：隐藏在没有定位div.progress的情况下无法工作，因为内部span的宽度）： 进度条测试 分区进度条{ 边框：1px#cc
溢出：隐藏在没有定位div.progress
的情况下无法工作，因为内部span
的宽度
）：
进度条测试
分区进度条{
边框：1px#ccc实体；位置：相对；
文本对齐：居中；高度：32px；
}
分区进度条进度{
高度：32px；
溢出：隐藏；/*这不起作用*/
}
div.progress\u bar.progress div{
位置：绝对；宽度：100%；高度：32px；
z索引：30；溢出：隐藏；
背景色：#44a；
}
分区进度条跨度{
位置：绝对；顶部：0；左侧：0；宽度：100%；
z指数：20；
颜色：#000；
}
分区进度条进度跨度{
位置：绝对；顶部：0；左侧：0；宽度：100%；
z指数：40；
颜色：#eee；
}
这是一个测试
这是一个测试
上述内容的实时版本：
以前的尝试：
这些图像是GIMP编辑的原型，与此代码显示的内容不完全相同
添加：谢谢大家，特别是Meep3D、Nosredna和Lachlan！然而，我仍然有一个问题-在我的例子中，进度条应该没有固定的宽度，并占用所有水平可用的空间（width:auto；
或width:100%
是可以接受的）。但是没有width:400px
rule Lachlan的代码中断。如果可能的话，我仍然希望避免使用JavaScript。您可以：
- 找一件适合你的灰色衣服
- 使用JavaScript动态地在白色和黑色之间更改颜色，具体取决于颜色所在的位置
- 使背景渐变的中间颜色更接近白色，并始终使用深色文本
- 将进度显示在方框外：
将进度条文本的第二个副本放在div中，并将div的溢出设置为隐藏，这样它就可以显示了吗
--
更新：我也不是javascript专家，但我确信，如果宽度如您所说的灵活，您可以找出对象的宽度，然后在此基础上设置偏移量。您可以为“百分比”文本使用文本阴影。唯一的缺点是它只能在最新的浏览器中工作。只有Firefox3.5、Safari（所有版本）和Chrome2+支持它
下面是一个使用文本阴影的演示，可以让您的进度更具可读性。
如果您愿意使用更多JavaScript，可以尝试以下jQuery插件：
文章说它只适用于IE，但它适用于Chrome3（我正在使用的）、Firefox3.5、InternetExplorer和Safari。它可能在较旧的浏览器中工作，但我还没有对它进行测试。Meep3D有正确的答案。盒子的两个版本。显示顶部的n%
更多选择：
- 把一个半透明的盒子放在盒子下面
使区域变暗的数字
为白色数字或点亮
黑色数字的区域
- 使用红色和白色作为背景和颜色
一个黑色的数字。（这里的问题是红色的
与错误关联，因此您可以
玩其他三种组合
所有高对比度的颜色
相互对抗。）
根据Meep3D的建议，复印两份文本
将每个容器包装成与容器宽度相同的div。“上”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>
#容器{
位置：相对位置；
边框：1px实心；
文本对齐：居中；
宽度：400px；
高度：32px；
}
.黑白相间{
高度：32px；
颜色：#000；
}
.黑白相间{
高度：32px；
颜色：#fff；
背景色：#44a；
}
.包装纸{
宽度：53%；
溢出：隐藏；
位置：绝对位置；
顶部：0；左侧：0；
}
.黑白相间{
宽度：100%；
}
.黑白相间{
宽度：188.7%；
}
这是一个测试
这是一个测试
您需要两个不同样式的值。和固定宽度
let计数器=0
常量增量=（）=>{
柜台++
}
let interval=setInterval（（）=>{
增量（）；
document.querySelectorAll（'.value'）.forEach（节点=>{
node.textContent=`${counter}`
});
document.querySelector（'.progress bar'）。style.width=`${counter}%`
如果（计数器>=100）清除间隔（间隔）；
}，50）
。进度包装器{
保证金：20px自动；
宽度：400px；
高度：20px；
背景图像：线性梯度（45度，#ccc 25%，透明25%，透明50%，#ccc 50%，#ccc 75%，透明75%，透明）；
动画：进度条2s线性无限；
背景尺寸：40px 40px；
位置：相对位置；
边界半径：5px；
溢出：隐藏；
}
.进度条{
z指数：3；
溢出：隐藏；
位置：绝对位置；
高度：20px；
背景色：#8178d9；
文本对齐：居中；
过渡：宽度0.5s；
}
.progress-value-1、.progress-value-2{
保证金：0；
位置：绝对位置；
[######### ] 50 %
<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>