CSS - 背景前景對比度文本顏色

Question

我有一個欄按百分比值着色。因爲它是白色的，白色款落在文字的

部分是對用戶不可見的。如果我選擇它，我可以看到它而不是otherwise-

是否有CSS的方式展現在對比的背景顏色的文本？也許一半的文本是白色的，一半的文本是黑色的，所以用戶可以看到它們。

Answer 1

我會做這樣的事情：

.progressbarContainer 
 
{ 
 
    position: relative; 
 
    width: 100px; 
 
    height: 15px; 
 
    background: #ff00ff; 
 
} 
 
.backText 
 
{ 
 
    position: absolute; 
 
    left: 0; 
 
    color: black; 
 
} 
 
.frontText 
 
{ 
 
    position: absolute; 
 
    left: 0; 
 
    color: red; 
 
} 
 
.progressbar 
 
{ 
 
    position: absolute; 
 
    width: 14.34%; 
 
    height: 100%; 
 
    background: blue; 
 
    overflow: hidden; 
 
}

<div class="progressbarContainer"> 
 
    <div class="backText"> 
 
     14.34% 
 
    </div> 
 
    <div class="progressbar"> 
 
    <div class="frontText"> 
 
     14.34% 
 
    </div> 
 
    </div> 
 

 
</div>

JSFiddle