如何在進度標籤與杆重疊時反轉進度標籤

所以我得到了這個代碼在工作，並被要求找到一種方法來改善它。我們正在使用包含單獨標籤的HTML5 progress元素。如何在進度標籤與杆重疊時反轉進度標籤

標籤被通過使用

margin-top: -40px;

由於進度條具有一個固定的高度放置在進度條。

我爲你做了一個jsfiddle，這樣你就可以看到progress-element是如何實現的。

https://jsfiddle.net/o3y6zxdx/

現在我想以一種標籤，它是由進度條覆蓋的部分，改變其顏色編輯代碼。在「Loadi」上面的小提琴應該顯示白色。

由於我是新手，我有這個任務的一些問題，所以有什麼辦法來實現這個？

在此先感謝！

來源

2016-05-23 SaltyM

要實現你想要的只是progress元素，你需要使用JavaScript和2個標籤，這可能不是最有效的方法。

不需要JavaScript的解決方案是讓您的進度條取代div而不是使用progress元素。內部div有白色文字，而外部div有黑色文字。當divs重疊以創建進度條時，白色文本將被截斷爲56％，從後面顯示剩餘的黑色文本。

#bar { 
 
    color: black; 
 
    position: relative; 
 
    background-color: gray; 
 
} 
 
#progress { 
 
    position: absolute; 
 
    width: 56%; 
 
    background-color: green; 
 
    color: white; 
 
    z-index: 100; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.progress-bar { 
 
    overflow: hidden; 
 
    height: 40px; 
 
} 
 
.full-width { 
 
    width: 300px; // set the desired width of your progress bar 
 
} 
 
.text { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 12px; 
 
    bottom: 0; 
 
    line-height: 1; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div id="bar" class="progress-bar full-width"> 
 
     <div class="text full-width"> 
 
     Loading...56% 
 
     </div> 
 
     <div id="progress" class="progress-bar"> 
 
     <div class="text full-width"> 
 
      Loading...56% 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

的jsfiddle：https://jsfiddle.net/tnkswtw3/18/

來源

2016-06-05 20:45:14

如何在進度標籤與杆重疊時反轉進度標籤

回答

相關問題