如何使用純CSS來實現帶有反向文本顏色的靈活進度欄？

Question

我正在使用純CSS實現一個靈活的進度條，其文本顏色為反色。

我的意思是請參考以下筆。

帶有反色的CSS進度欄

CSS進度欄

問題是這兩個實現中的進度條具有固定寬度 （具有固定寬度，可以設置.progress-text的長度/位置），但是我希望進度條的寬度為100%或其他相對寬度長度 。 沒有JS很難適應我的需要。

我失敗的實驗去了這里 。 您可以調整實現以使.progress支持相對寬度為50%嗎？

這是代碼段。 謝謝@TheThirdMan。

 body { background-color: #000; } h1 { text-align: center; font-family: "Trebuchet MS", Helvetica, sans-serif; font-weight: normal; margin: 50px 0 0; color: #fff; } .progress { position: relative; border: 0; width: 500px; height: 40px; line-height: 40px; margin: 100px auto; font-family: arial, sans-serif; font-weight: bold; font-size: 30px; background-color: #07A4DD; border-radius: 40px; overflow: hidden; } .progress .progress-text { position: absolute; top: 0; width: 500px; text-align: center; color: #fff; font-variant: small-caps; } .progress .progress-bar { height: 100%; overflow: hidden; width: 54%; background-color: #fff; border-radius: inherit; overflow: hidden; position: relative; -webkit-animation: animate 4s; animation: animate 4s; } .progress .progress-bar .progress-text { color: #07A4DD; } @-webkit-keyframes animate { 0% { width: 0%; } } @keyframes animate { 0% { width: 0%; } } 

 <h1>Flexible CSS progress bar with inverted colors</h1> <div class="progress"> <div class="progress-text">Progress</div> <div class="progress-bar"> <div class="progress-text">Progress</div> </div> </div> 

---

感謝@AndrewBone的回答。 但我有一些理由不在此問題中使用vw ：

1. 我們之前曾嘗試過vw的其他問題，但某些android設備不支持它，因此我們將其刪除。
2. 在某些情況下（即使不是很多） .progress的父.progress與視口的寬度不成比例。

---

這是我的實驗。 我的想法類似於CSS進度欄 。

這個想法是：

• 這兩個.progress-text都是絕對定位的，與.progress一樣寬。
• 第一個.progress-text是白色.progress-text ，它作為背景位於.progress中。
• 第二個.progress-text是藍色文本，由.progress-bar剪輯。

這些導致：

• .progress-bar必須相對.progress-text才能.progress-text 。
• .progress-text （絕對）位於.progress-bar而不是.progress ，因此無法獲得.progress的寬度。

所以：

• 如果.progress具有固定寬度（例如$bar-width: 500px ），我可以通過將.progres-text的寬度設置為與.progress的寬度相同來.progress 。
• 如果.progress具有相對寬度（例如$bar-width: 50% ），我應該怎么做才能使其工作？

Answer 1

好，這是個主意，我在這里可能是錯的，請隨時糾正我。 vw （ REF ）是一個精美的CSS3，它意味着視口寬度，在下面的示例中使用了75vw，這意味着視口寬度的75％。 它可以工作，並且在您更改頁面時大小可以響應。

最重要的是，我添加了一個CSS變量，以便在測試期間只需鍵入一次即可。 CSS變量是新事物，但並不是在所有瀏覽器中都可以使用（ REF ）

 :root { --progress-width: 75vw; } body { background-color: #000; } h1 { text-align: center; font-family: "Trebuchet MS", Helvetica, sans-serif; font-weight: normal; margin: 50px 0 0; color: #fff; } .progress { position: relative; border: 0; width: var(--progress-width, 500px); height: 40px; line-height: 40px; margin: 100px auto; font-family: arial, sans-serif; font-weight: bold; font-size: 30px; background-color: #07A4DD; border-radius: 40px; overflow: hidden; } .progress .progress-text { position: absolute; top: 0; width: var(--progress-width, 500px); text-align: center; color: #fff; font-variant: small-caps; } .progress .progress-bar { height: 100%; overflow: hidden; width: 54%; background-color: #fff; border-radius: inherit; overflow: hidden; position: relative; -webkit-animation: animate 4s; animation: animate 4s; } .progress .progress-bar .progress-text { color: #07A4DD; } @-webkit-keyframes animate { 0% { width: 0%; } } @keyframes animate { 0% { width: 0%; } } 

 <div class="progress"> <div class="progress-text">Progress</div> <div class="progress-bar"> <div class="progress-text">Progress</div> </div> </div> 

希望這可以幫助。