黑马程序员技术交流社区

标题: 进度条上字的颜色是怎么随着背景色的变化而变化的 [打印本页]

作者: chennaiweng 时间: 2019-2-14 15:30
标题: 进度条上字的颜色是怎么随着背景色的变化而变化的
具体效果如下

代码如下：
<div class="bg">
  <span class="text">0%</span>
  <div class="progress" style="width: 0%;">
<span class="text">0%</span>
  </div>
</div>
.text {
  position: absolute;
  left: 125px;
  transform: translateX(-50%);
  font-size:25px;
}

css代码如下：

.bg {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #6cf;
  width : 250px;
  height: 50px;
  line-height: 50px;
  position: relative;
}

.bg > .text {
  color: #6cf;
}

.progress {
  position: absolute;
  height: 100%;
  background: #6cf;
  overflow: hidden;
}
.progress > .text {
  color: #fff;
}

2.png (18.72 KB, 下载次数: 16)

作者: 一个人一座城0.0 时间: 2019-2-17 11:30
看一看。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2