css - CSS-背景の前景のコントラストテキストの色

Question

パーセンテージ値で色付けされたバー列があります。

テキストの一部は白で、白いセクションにあるため、ユーザーには表示されません。私がそれを選択した場合、私はそれを見ることができますが、そうでない場合は見えません-

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