CSS 진행 막대 텍스트 색상 대비 및 빈 배경에 대한 텍스트 색상?

StackOverflow https://stackoverflow.com/questions/1080708

문제

채워진 배경 영역과 빈 배경 영역 사이에 대비 색상이있는 XHTML+CSS 진행 막대를 갖고 싶습니다.

텍스트 색상에 문제가 있습니다. 채워진 빈 배경이 너무 대조적이기 때문에 (요구 사항), 읽을 수 있으려면 텍스트가 두 가지와 대조되도록 이중 색이어야합니다. 이미지는 단어보다 더 잘 설명해야합니다.

진한 파란색으로 채워진 영역과 흰색 빈 배경이있는 진행률 http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png 문제의 예 http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png

현재의 진행 상황 바 구현은 사소한 것이지만 위의 예에서 볼 수 있듯이 텍스트는 어떤 경우에는 읽기가 어려울 수 있습니다. 이는 정확히 해결하고 싶은 문제입니다.

내 현재 (단순화 된) 구현 시도 (실패, overflow: hidden 포지셔닝없이 작동하지 않습니다 div.progress 내부 때문에 위치 할 수 없습니다 span'에스 width):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Progress bar test</title>
  <style type="text/css">
    div.progress_bar {
        border: 1px #ccc solid; position: relative;
        text-align: center; height: 32px;
    }
    div.progress_bar .progress {
        height: 32px;
        overflow: hidden; /* This does NOT work! */
    }
    div.progress_bar .progress div {
        position: absolute; width: 100%; height: 32px;
        z-index: 30; overflow: hidden;
        background-color: #44a;
    }
    div.progress_bar span {
        position: absolute; top: 0; left: 0; width: 100%;
        z-index: 20;
        color: #000;
    }
    div.progress_bar .progress span {
        position: absolute; top: 0; left: 0; width: 100%;
        z-index: 40;
        color: #eee;
    }
  </style>
</head>
<body>
  <!-- Can be of any (unknown) width. Think of "width: auto".
       The 400px value is just to keep it small on a big monitor.
       DON'T rely on it! -->
  <div id="container" style="width: 400px;">
    <div class="progress_bar">
      <!-- div.progress is a dark filled area container -->
      <div class="progress" style="width: 51%;">
        <!-- Actually dark filled area -->
        <div style="width: 51%;"></div>
        <!-- Text (white).
             Does not clip, even with overflow: hidden on parent! -->
        <span>This is a test</span>
      </div>
      <!-- Text (black) -->
      <span>This is a test</span>
    </div>
  </div>
</body>
</html>

위의 라이브 버전 : http://drdaeman.pp.ru/tmp/20090703/test2.html
이전 시도 : http://drdaeman.pp.ru/tmp/20090703/test.html

이미지는 김프 편집 프로토 타입 이며이 코드가 표시하는 것은 아닙니다.

추가하다: 특히 Meep3d, Nosredna 및 Lachlan에게 감사합니다! 그러나 여전히 문제가 있습니다. 제 경우에는 진행률 표시 줄이 고정 너비가 없어야하며 수평으로 사용 가능한 모든 공간을 가져야합니다 (width: auto; 또는 width: 100% 허용됩니다). 그러나없이 width: 400px Lachlan의 코드가 중단됩니다. 그리고 가능하다면 여전히 JavaScript를 사용하지 않기를 원합니다.

도움이 되었습니까?

해결책

MEEP3D의 제안에 따라 텍스트 2 부를 가져 가십시오.

컨테이너와 같은 너비의 div로 각각 감싸십시오. "상단"DIV는 원하는 백분율로 클립을 클립하는 다른 div로 감싸고 있습니다.

업데이트 : 고정 너비를 제거했습니다.
"상단"DIV는 래퍼의 역률로 크기입니다.

<html>
<head>
  <style type="text/css">
    #container {
        position: relative;
        border: 1px solid;
        text-align: center;
        width: 400px;
        height: 32px;
    }
    .black-on-white {
        height: 32px;
        color: #000;
    }
    .white-on-black {
        height: 32px;
        color: #fff;
        background-color: #44a;
    }
    .wrapper {
        width: 53%;
        overflow: hidden;
        position: absolute;
        top: 0; left: 0;
    }
    .black-on-white {
        width: 100%;
    }
    .white-on-black {
        width: 188.7%;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="wrapper">
        <div class="white-on-black">
             <span>This is a test</span>
        </div>
    </div>
    <div class="black-on-white">
        <span>This is a test</span>
    </div>
  </div>
</body>
</html>

다른 팁

DIV 내부에 진행률 막대 텍스트의 두 번째 사본을 넣고 DIV의 오버플로를 숨겨 지도록 설정하는 것은 어떻습니까?

--

업데이트 : 나는 또한 JavaScript 전문가가 아니지만 객체의 너비를 찾은 다음 너비가 말한대로 유연한 경우 오프셋을 설정할 수 있다고 확신합니다.

당신은 할 수 있습니다 :

  • 어울리는 회색을 찾으십시오
  • JavaScript를 사용하여 흰색과 검은 색의 색상을 동적으로 변경합니다.
  • 배경 구배의 중간 색상을 흰색에 더 가깝게 만들고 항상 어두운 텍스트를 사용하십시오.
  • 진전을 두십시오 Outisde 상자:
[#########              ] 50 %

"백분율"텍스트에 텍스트 섀도우를 사용할 수 있습니다. 이것의 유일한 단점은 최신 브라우저에서만 작동한다는 것입니다. Firefox 3.5, Safari (모든 버전) 및 Chrome 2+ 만 지원합니다.

다음은 진행 상황을 읽을 수있게하는 방식으로 텍스트 쉐이드를 사용하는 데모입니다.
http://www.w3.org/style/examples/007/text-shadow#white

더 많은 JavaScript를 기꺼이 사용하려는 경우이 jQuery 플러그인을 사용해 볼 수 있습니다.

http://kilianvalkhof.com/2008/javaScript/text-shadow-in-ie-with-jquery/

이 기사는 IE에서만 작동하지만 Chrome 3 (내가 사용하는 것), Firefox 3.5, Internet Explorer 및 Safari에서 작동한다고 말합니다. 오래된 브라우저에서 작동 할 수 있지만 테스트하지 않았습니다.

MEEP3D에는 정답이 있습니다. 상자의 두 가지 버전. 상단 1의 n%를 드러냅니다.

더 많은 옵션 :

  • 반투명 상자를 흰색 번호의 영역을 어둡게하거나 검은 색 번호로 영역을 밝게하는 숫자 아래에 배치하십시오.
  • 빨간색과 흰색을 배경과 검은 색 숫자로 사용하십시오. (여기서 문제는 빨간색이 오류와 관련되어 있으므로 서로 대비가 높은 세 가지 색상의 다른 조합으로 재생할 수 있습니다.)
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top