7

塗りつぶされた背景領域と空の背景領域の間にコントラストのある色の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

私の現在のプログレスバーの実装は簡単ですが、上記の例が示すように、テキストが読みにくい場合があります。これはまさに私が解決したい問題です。

私の現在の（簡略化された）実装の試み（内部のsのために配置できない配置overflow: hiddenなしでは機能しないため、失敗します）：div.progressspanwidth

<!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ルールがなければ、Lachlanのコードは壊れます。そして、可能であれば、JavaScriptの使用は避けたいと思います。

4

6 に答える 6

8

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>
于 2009-07-04T12:43:34.457 に答える
8

プログレスバーテキストの2番目のコピーをdiv内に配置し、divのオーバーフローを非表示に設定して、それとともに表示されるようにするにはどうでしょうか。

-

更新：私もJavaScriptの専門家ではありませんが、オブジェクトの幅を見つけて、幅が柔軟であれば、それに基づいてオフセットを設定できると確信しています。

于 2009-07-03T20:20:08.793 に答える
1

あなたは出来る：

  • 適したグレーを探す
  • JavaScriptを使用して、場所に応じて白と黒の間で色を動的に変更します
  • 背景のグラデーションの中間色を白に近づけ、常に暗いテキストを使用します
  • 進捗状況をボックスの外に置きます。
[#########] 50％
于 2009-07-03T20:19:59.650 に答える
1

「パーセンテージ」テキストにテキストシャドウを使用できます。これの唯一の欠点は、最新のブラウザでのみ機能することです。Firefox 3.5、Safari（すべてのバージョン）、およびChrome2+のみがサポートしています。

これは、進行状況を読みやすくする方法でテキストシャドウを使用するデモです。
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で機能します。古いブラウザでも動作する可能性がありますが、テストしていません。

于 2009-07-03T20:33:49.927 に答える
1

Meep3Dには正解があります。ボックスの2つのバージョン。上位のもののn％を明らかにします。

より多くのオプション：

  • 数字の下に半透明のボックスを置き、白い数字の領域を暗くするか、黒い数字の領域を明るくします。
  • 背景と黒の数字として赤と白を使用してください。（ここでの問題は、赤がエラーに関連しているため、すべて互いに高コントラストである3色の他の組み合わせで遊ぶことができます。）
于 2009-07-03T20:34:52.030 に答える
1

異なるスタイルの2つの値が必要です。そして固定幅

let counter = 0

const increment = () => {
  counter++
}

let interval = setInterval(() => {
  increment();
  document.querySelectorAll('.value').forEach(node => {
    node.textContent = `${counter}`  
  });
  document.querySelector('.progress-bar').style.width = `${counter}%`
  if (counter >= 100) clearInterval(interval);
}, 50)
.progress-wrapper{
  margin: 20px auto;
  width: 400px; 
  height: 20px;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent);
  animation: progress-bar-stripes 2s linear infinite;
  background-size: 40px 40px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
 
}
.progress-bar{
  z-index: 3;
  overflow: hidden;
  position: absolute;
  height: 20px;
  background-color: #8178d9; 
  text-align: center;
  transition: width 0.5s ease;
}
.progress-value-1, .progress-value-2{
  margin: 0;
  position: absolute;
  width: 400px; 
  color: #8178d9;
  text-align: center;
  z-index: 2;
  font-weight: bold;
}
.progress-value-2{
  color: #fff;
  z-index: 1;
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
<div class="container">
  <div class="progress-wrapper">
    <div class="progress-bar">
      <p class="progress-value-2">
        <span class="value"></span>%
      </p>
    </div>
    <p class="progress-value-1">
      <span class="value"></span>%
    </p>
  </div>
</div>

https://codepen.io/kosachevlad/pen/dypEjBa

于 2021-01-25T09:36:39.750 に答える