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

前端之家收集整理的这篇文章主要介绍了对比度填充和空白背景的CSS进度条文本颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望X HTML 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,由于内跨距的宽度,我无法定位):

<!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!但是我仍然有一个问题 – 在我的情况下,进度条应该没有固定宽度并占用所有水平可用空间(宽度:自动;或宽度:100%是可接受的).但没有宽度:400px规则Lachlan的代码中断.如果可能的话,我仍然希望避免使用JavaScript.

解决方法

根据Meep3D的建议,请取2份文本.

将每个包裹在与容器相同宽度的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>
原文链接:https://www.f2er.com/css/215451.html

猜你在找的CSS相关文章