在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 前端：關(guān)于進度條上的字的問題，字的顏色是怎么隨著背景色的變化而變化的

前端：關(guān)于進度條上的字的問題，字的顏色是怎么隨著背景色的變化而變化的

前端：關(guān)于進度條上的字的問題，字的顏色是怎么隨著背景色的變化而變化的，求大神指點一二，蟹蟹

具體效果如下
圖片描述

甚至是
圖片描述

我是說，前端如何實現(xiàn)的，求大神指點一二，蟹蟹

回答
編輯回答
慢半拍

emmmmm 吃飯前等人，就簡單實現(xiàn)了一個，但是不知道兼容性咋樣。。主要用的就是 css3 的 clip 屬性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .progress-container {
      position: relative;
      border: 1px solid black;
      font-size: 28px;
    }
    .skyblue {
      position: absolute;
      top: 0;
      z-index: 1;
      background: skyblue;
      color: white;
    }
    .white {
      position: absolute;
      top: 0;
      z-index: 2;
      background: white;
      color: skyblue;
      clip: rect(auto auto auto 194px);
    }
  </style>
</head>
<body>
  <div class="progress-container">
    <div class="skyblue">50%</div>
    <div class="white">50%</div>
  </div>
</body>
</html>

原理大概這樣：

包裹的容器里有兩個初始定位一樣的 div
底下的 div 長這樣：
圖片描述

上面的 div 長這樣：

圖片描述

之后根據(jù)進度用 js 來調(diào)整 clip: rect(top, right, bottom, left) 中的屬性值就行了，這個例子里調(diào)整的是 left 值

2018年3月10日 10:06
編輯回答
還吻

想了好久...大概OK...

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

.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;
}
2017年12月31日 09:09