溢出时更改字体颜色

Question

这是我试图实现这种效果的地方： http://www.smalldot.agency/ccren/goals-page/

随着 "val" 条的宽度增加，它应该与 "current" 文本重叠（（与 "val" 的文本相同，但颜色不同））。我可以将 "current" 的副本强制置于 "val" 元素之上，但我无法将其置于下方。

如果我将 "current" p class 放在 "val" div class 下方，"current" 中的文字会显示在南边进度条的上方，而不是下方。

此外，z-index：0；似乎没有采取任何措施来解决问题。

HTML:

<div class="progdiv" style="width:100%;">
    <p class="current">1,234</p>
    <div class="val" style="width:3%;">1234</div>
</div>

CSS

.val {
  height:100%;
  border-radius:3px;
  line-height: 1.5em;
  font-size: 12pt;
  background: #019BA9!important;
  text-align: left!important;
  vertical-align: center;
  -webkit-box-shadow: 3px 3px 2px #bbbbbb;
  overflow:hidden;
}

.progdiv {
  background-color: #FFFFFF!important;
  height: 1.5em;
  text-align: right;
  vertical-align: center;
  border: solid 1px #eeeeee;
  border-radius: 3px;
  -webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
  text-align: left!important;
  overflow: hidden!important;
}

.current {
  text-indent: 6px;
  height:100%;
  border-radius:3px;
  font-size: 12pt;
  line-height: 1.5em;
  text-align: left!important;
  vertical-align: center;
  color: #019BA9!important;
  position:absolute!important;
  text-align: left!important;
  z-index: 0;
}

Answer 1

只需将 position: absolute; 添加到 .val CSS。同时从 .val 和 .current CSS 中删除 height:100%。

溢出时更改字体颜色

Change Font Color on Overflow

css

fonts

text

colors

overflow