コントラストが塗りつぶされた背景と空の背景の CSS プログレスバーのテキストの色は?

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

質問

塗りつぶされた背景領域と空の背景領域の間にコントラストカラーを備えた XHTML+CSS プログレスバーを表示したいと考えています。

文字の色に問題があります。塗りつぶされた背景と空の背景はコントラストが強すぎるため (これは必須です)、読みやすくするにはテキストを 2 色にして両方の背景とコントラストを持たせる必要があります。言葉よりも画像のほうがよく説明できるはずです。

濃い青で塗りつぶされた領域と白い空の背景を持つ進行状況バー 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

画像は GIMP で編集されたプロトタイプであり、このコードが表示するものとまったく同じではありません。

追加： 皆さん、特に Meep3D、Nosredna、Lachlan に感謝します。ただし、まだ問題があります。私の場合、プログレスバーには固定幅がなく、水平方向に利用可能なスペースがすべて占有される必要があります（width: auto; または width: 100% 許容されます)。でもそれがなければ width: 400px ラクランの暗号が壊れるルール。そして、可能であれば JavaScript の使用は避けたいと思っています。

役に立ちましたか？

解決

Meep3Dの提案を1として、テキストの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の内側にプログレスバーのテキストの2番目のコピーを置くことについては何、それはそれで明らかになったので、隠しにdiv要素のオーバーフローを設定する？

-

アップデート：私はまた、javascriptの専門家ではないが、私はあなたがオブジェクトの幅を見つけると、あなたが言うように幅が柔軟であればオフセットがに基づいて

を設定することができることを確信しています。

あなたは出来る：

  • 似合うグレーを見つけてください
  • JavaScript を使用して、場所に応じて白と黒の間で色を動的に変更します。
  • 背景のグラデーションの中間色を白に近づけ、常に濃い色のテキストを使用します
  • 進捗状況を載せます 外で ボックス：
[#########              ] 50 %

あなたはあなたの「割合」テキストのテキストの影を使用することができます。これに対する唯一の欠点は、それだけで、最新のブラウザで動作だろうということです。 Firefox 3.5では、サファリのみ（すべてのバージョン）、およびChromeはそれをサポート2+ます。

ここでは、あなたの進歩が読みやすくなりの方法でテキストの影を使用してのデモです。
http://www.w3.org/Style/Examples/007/テキストシャドウ＃白の

あなたはより多くのJavaScriptを使用して喜んでいる場合は、このjQueryプラグインを試すことができます：

http://kilianvalkhof.com/2008/ジャバスクリプト/テキストシャドウ・イン・IE-と-jqueryの/ の

の記事は、しかし、それはクロム3（私が使用しているどのような）は、Firefox 3.5、Internet Explorer、およびSafariで動作しますが、それはIEのみで動作しますと言います。これは、古いブラウザでは動作かもしれませんが、私はそれをテストしていません。

Meep3D が正解を持っています。ボックスには 2 つのバージョンがあります。上位の n% を公開します。

より多くのオプション：

  • 半透明のボックスを数字の下に置いて、白い数の領域を暗くするか、黒い数の領域を明るくします。
  • 赤と白を背景と黒の数字として使用します。（ここでの問題は赤がエラーに関連しているので、互いに高いコントラストである3色の他の組み合わせで再生できます。）
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top