CSS - 배경 전경 대비 텍스트 색상

Question

나는 백분율 값으로 표시되는 막대 열이 있습니다. 이 흰색이고 흰색 부분에 빠진다 이후 텍스트의

부분은 사용자에게 표시되지 않습니다. 내가 그것을 선택하면 내가 그것을 볼 수 있지만 배경 색상과 달리 텍스트를 표시하는 CSS의 방법은

있습니까 otherwise- 수 있습니까? 어쩌면 텍스트의 절반이 흰색이고 텍스트의 절반이 검정색 일 수 있으므로 사용자가 볼 수 있습니다. 나는 같은 것을 할 것

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