CSS进度条文本颜色用于对比填充和空白背景？

发布于 2024-07-25 22:29:29 字数 3210 浏览 2 评论 0原文

我想要 XHTML+CSS 进度条，在填充和空白背景区域之间具有对比色。

我的文本颜色有问题。由于填充背景和空白背景对比度太高（这是一项要求），为了保持可读性，文本应该是双色的，以便与它们形成对比。图片应该比文字更好地解释它：

深蓝色填充的进度条区域和白色空背景http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png 问题示例 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< /a>

这些图像是 GIMP 编辑的原型，并不完全是此代码显示的内容。

添加：谢谢大家，特别是 Meep3D、Nosredna 和 Lachlan！但是我仍然有一个问题 - 在我的情况下，进度条应该没有固定宽度并占据所有水平可用空间（width: auto; 或 width: 100% 是可以接受的）。但如果没有 width: 400px 规则，Lachlan 的代码就会崩溃。如果可能的话，我仍然想避免使用 JavaScript。

原文

I want to have XHTML+CSS progress bar with contrast colors between filled and empty background areas.

I have a problem with text color. Because filled and empty backgrounds are too contrast (this is a requirement), to remain readable the text should be double-colored to be contrast to both of them. The image should explain it better than words:

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

My current progress bar implementation is trivial, but as example above shows, the text can be hard to read in some cases, which is exactly a problem I want to solve.

My current (simplified) implementation attempt (fails, because overflow: hidden does not work without positioning div.progress which I cannot position because of inner span's 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>

Live version of the above: http://drdaeman.pp.ru/tmp/20090703/test2.html
Previous attempt: http://drdaeman.pp.ru/tmp/20090703/test.html

The images are GIMP edited prototypes, and not exactly what this code displays.

Add: Thank you all, especially Meep3D, Nosredna and Lachlan! However I still have a problem — in my case progress bar should have no fixed width and take all horizontally available space (width: auto; or width: 100% are acceptable). But without width: 400px rule Lachlan's code breaks. And I'd still like to avoid using JavaScript, if that's possible.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煞人兵器 2024-08-01 22:29:30

这个答案使用clip-path: inset(0 0 0 50%);是很棒的。

如此答案中所述，使用带有background-clip的背景线性渐变也是有趣的。

回复收藏 0 原文

黎歌 2024-08-01 22:29:29

根据 Meep3D 的建议，复制 2 份文本。

将每个内容包裹在与容器宽度相同的 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>

As per Meep3D's suggestion, take 2 copies of the text.

Wrap each in a div of the same width as the container. The "upper" div is wrapped with another div which clips at the desired percentage.

Update: removed the fixed widths.
The "upper" div is sized to the inverse percentage of its wrapper.

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

回复收藏 0 原文

手心的海 2024-08-01 22:29:29

如何将进度条文本的第二个副本放入 div 内，并将 div 的溢出设置为隐藏，以便它随之显示？

更新：我也不是 javascript 专家，但我确信您可以找出对象的宽度，然后根据该宽度设置偏移量（如果宽度像您所说的那样灵活）。

回复收藏 0 原文

软糖 2024-08-01 22:29:29

您可以：

找到适合的灰色
使用 JavaScript 根据位置动态更改白色和黑色之间的颜色
让背景渐变的中间颜色更接近白色，并始终使用深色文本
将进度 outisde< /em> 盒子：

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

You could:

Find a grey which suits
Use JavaScript to change the colour between white and black dynamically, depending on where it is
Make the middle colour of the background gradient closer to white, and always use dark text
Put the progress outisde the box:

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

回复收藏 0 原文

怎樣才叫好 2024-08-01 22:29:29

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

这是一个使用文本阴影的演示，其方式可以使您的进度可读。
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 中运行。它可能适用于较旧的浏览器，但我还没有测试过。

回复收藏 0 原文

樱花落人离去 2024-08-01 22:29:29

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

更多选项：

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

回复收藏 0 原文

阳光下慵懒的猫 2024-08-01 22:29:29

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

You need 2 values styled differently. And fixed width

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

回复收藏 0 原文

~没有更多了~