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

【问题标题】：CSS progress bar text color for contrast filled and empty backgrounds?对比度填充和空背景的CSS进度条文本颜色？
【发布时间】：2009-07-03 20:17:02
【问题描述】：

我希望 XHTML+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

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

我当前的（简化的）实现尝试（失败，因为如果没有定位 div.progress，overflow: hidden 将无法工作，因为内部 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。

【问题讨论】：

0% 和 100% 到底有什么问题？
要么是深蓝色背景上的黑色文本（很难阅读），要么是白色背景上的白色文本（无法阅读）。
我一定错过了什么。为什么不让它在深蓝色的时候变成白色，在白色的时候变成黑色？
我认为 0-50% 或 50-100% 有问题，而不仅仅是 0 和 100%。就像图片所示，很难选择在两种背景颜色上都可读的单一颜色。
@Nosredna 这就是他想做的。但是怎么做？他如何仅使用可用的工具来完成这项相当复杂的任务？请注意，0 的一部分是白色，而同一字形的另一部分是黑色。

标签： css text progress-bar effects

【解决方案1】：

按照 Meep3D 的建议，将文本复制 2 份。

将每个包装在与容器宽度相同的 div 中。 “上部” 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>

【讨论】：

谢谢，这也是我昨天尝试的。一个问题——在我的例子中，进度条不应该有固定的宽度并且占据所有水平的可用空间。但是如果没有width: 400px 规则，一切都会中断。如果可能的话，我想避免使用 JavaScript。
太棒了！非常感谢，效果很好。没有考虑 (1/percent) 宽度。

【解决方案2】：

将进度条文本的第二个副本放在 div 中，并将 div 的溢出设置为隐藏，以便它显示？

--

更新：我也不是 javascript 专家，但我相信您可以找出对象的宽度，然后根据您所说的宽度灵活设置偏移量。

【讨论】：

这就是你想要做的。让两个版本的栏相互重叠并逐渐显示其中一个。
我有一个整体的想法——这似乎是一个正确的方法，但进度没有固定宽度并自动延伸到所有可用空间，所以将副本放在内部（填充区域) div 示例 width: 50% 不起作用。

【解决方案3】：

你可以：

找到适合的灰色
使用 JavaScript 动态更改白色和黑色之间的颜色，具体取决于它的位置
使背景渐变的中间颜色更接近白色，并始终使用深色文本
把进度放在outisde盒子里：

[#########] 50 %

【讨论】：

谢谢。如果我无法实现我真正想要的，我会将这些建议视为“后备”选项。不过，如果可能的话，我真的很想按照我的问题图片中显示的方式来实现它。

【解决方案4】：

您可以为“百分比”文本使用文本阴影。唯一的缺点是它只能在最新的浏览器中工作。只有 Firefox 3.5、Safari（所有版本）和 Chrome 2+ 支持它。

这是一个使用 text-shadow 的演示，可以让您的进度变得可读。
http://www.w3.org/Style/Examples/007/text-shadow#white

如果你愿意使用更多的 JavaScript，你可以试试这个 jQuery 插件：

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

文章说它只适用于 IE，但它适用于 Chrome 3（我正在使用的）、Firefox 3.5、Internet Explorer 和 Safari。它可能适用于旧版浏览器，但我尚未对其进行测试。

【讨论】：

【解决方案5】：

Meep3D 有正确的答案。两个版本的盒子。显示 n% 的顶部。

更多选项：

在下面放一个半透明的盒子使该区域变暗的数字对于白色数字或减轻黑色数字的区域。
使用红色和白色作为背景和一个黑色的号码。（这里的问题是红色的与错误相关联，因此您可以玩其他三人组合都是高对比度的颜色互相反对。）

【讨论】：

【解决方案6】：

您需要 2 个不同样式的值。和固定宽度

let counter = 0

const increment = () => {
  counter++
}

let interval = setInterval(() => {
  increment();
  document.querySelectorAll('.value').forEach(node => {
    node.textContent = `${counter}`  
  });
  document.querySelector('.progress-bar').style.width = `${counter}%`
  if (counter >= 100) clearInterval(interval);
}, 50)

.progress-wrapper{
  margin: 20px auto;
  width: 400px; 
  height: 20px;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent);
  animation: progress-bar-stripes 2s linear infinite;
  background-size: 40px 40px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
 
}
.progress-bar{
  z-index: 3;
  overflow: hidden;
  position: absolute;
  height: 20px;
  background-color: #8178d9; 
  text-align: center;
  transition: width 0.5s ease;
}
.progress-value-1, .progress-value-2{
  margin: 0;
  position: absolute;
  width: 400px; 
  color: #8178d9;
  text-align: center;
  z-index: 2;
  font-weight: bold;
}
.progress-value-2{
  color: #fff;
  z-index: 1;
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

<div class="container">
  <div class="progress-wrapper">
    <div class="progress-bar">
      <p class="progress-value-2">
        <span class="value"></span>%
      </p>
    </div>
    <p class="progress-value-1">
      <span class="value"></span>%
    </p>
  </div>
</div>

https://codepen.io/kosachevlad/pen/dypEjBa

【讨论】：