7

我希望 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没有定位就无法工作，因为 inner 'sdiv.progress我无法定位）：spanwidth

<!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。

4

6 回答 6

8

根据 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>
于 2009-07-04T12:43:34.457 回答
8

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

--

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

于 2009-07-03T20:20:08.793 回答
1

你可以：

  • 找到适合的灰色
  • 使用 JavaScript 动态更改白色和黑色之间的颜色，具体取决于它的位置
  • 使背景渐变的中间颜色更接近白色，并且始终使用深色文本
  • 把进度放在盒子外面：
[######### ] 50 %
于 2009-07-03T20:19:59.650 回答
1

您可以为“百分比”文本使用文本阴影。唯一的缺点是它只能在最新的浏览器中工作。只有 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 中运行。它可能适用于较旧的浏览器，但我尚未对其进行测试。

于 2009-07-03T20:33:49.927 回答
1

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

更多选择：

  • 在数字下方放置一个半透明框，使白色数字的区域变暗或黑色数字的区域变亮。
  • 使用红色和白色作为背景和黑色数字。（这里的问题是红色与错误相关，因此您可以使用三种颜色的其他组合，这些组合都相互具有高对比度。）
于 2009-07-03T20:34:52.030 回答
1

您需要 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

于 2021-01-25T09:36:39.750 回答