代码之家 › 专栏 › 技术社区 › drdaeman

对比度填充和空白背景的CSS进度条文本颜色?

effects progress-bar text css

drdaeman · 技术社区 · 15 年前

我想要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

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

我当前(简化)的实现尝试(失败,因为 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。

5 回复 | 直到 14 年前

Lachlan Roche 15 年前

根据MEEP3D的建议,复制两份文本。

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

Meep3D 15 年前

将进度条文本的第二个副本放在DIV中,并将DIV的溢出设置为隐藏,这样它就可以用它显示出来了,怎么样?

——

更新:我也不是一个javascript专家,但是我确信你可以找到一个对象的宽度,然后根据这个宽度设置偏移量,如果宽度像你说的那样灵活。

Lucas Jones 15 年前

你可以:

找一个适合的灰色
使用javascript动态地在白色和黑色之间更改颜色,具体取决于颜色的位置。
使背景渐变的中间颜色更接近白色,并始终使用深色文本
取得进展 奥蒂斯 盒子:

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

Dan Herbert 15 年前

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

下面是一个使用文本阴影的演示,它将使您的进度可读。
http://www.w3.org/Style/Examples/007/text-shadow#white

如果您愿意使用更多的javascript,可以尝试这个jquery插件:

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

这篇文章说它只在IE中工作,但是它在Chrome3(我正在使用的)、火狐3.5、InternetExplorer和Safari中工作。它可能在旧的浏览器中工作,但我没有测试过。

Nosredna 15 年前

meep3d有正确的答案。盒子的两个版本。显示前一个的n%。

更多选择:

把一个半透明的盒子放在使区域变暗的数字对于一个白色的数字或减轻黑色数字区域。
使用红色和白色作为背景和一个黑色的数字。(这里的问题是红色与错误相关,因此您可以玩其他三种组合都是高对比度的颜色彼此对抗。)