2

特定の値に応じてオブジェクトの背景色を変える必要があります。特に、これは、理論的には 100 の異なる背景色を持つパーセンテージ バーです (空の場合は存在しない色は無視されます)。バーの幅は当然 1 から 100% まで変化します。どうすればすべての異なる色合いを自動的に作成できるのでしょうか?

私の基本的な考え方は次のとおりです。幅 100 ピクセルの画像があり、各ピクセルの色が異なる場合、背景の幅を 1 ピクセルに制限し、適切なオフセットを使用して、それを繰り返します。そうすれば、JavaScript を介して変更する必要があるのは 1 つの CSS プロパティ (オフセット) であり、100 の異なるクラスを切り替える必要はありません。残念ながら、それは background-size、background-position、background-repeat が機能する方法ではありません。私の質問は次のとおりです。パーセンテージに直線的に依存する 3 つ以下の数値 CSS プロパティに依存する単純なものにするために、どのような可能性が必要ですか?

前もって感謝します。

編集：私が試したアイデアがありましたが、うまくいきました。

高さ 100 ピクセル、幅 1 ピクセルの画像をフォトショップで作成しました。各ピクセルは、そのパーセンテージで色を表します。したがって、ピクセル 0 は 1%、ピクセル 99 は 100% になります。次に、少なくともプログレス バーの高さだけ、その画像を垂直方向に引き伸ばします。高さが 20px の場合は、画像を少なくとも 20 倍に引き伸ばします。引き伸ばしは、グラデーションがないはずの場所にグラデーションが発生するのを防ぐために、最近傍アルゴリズムを使用して行う必要があります。各ピクセルを垂直方向に 20 倍に引き伸ばすだけでよいため、20 ピクセルごとに鋭いエッジが表示されます。

その結果の画像は、水平方向にのみ繰り返される背景画像として使用します。image-position を使用して、background-position: 0 -[(percentage-1)*20]px と width: [percentage]% を設定しました。(角括弧内の部分は、PHP や JavaScript などを使用して計算されます)。そして、それはほとんどそれです。パーセンテージが変わるたびに、これら 2 つの値を変更するだけで、背景の色に関係なく自動的に適応します。

4

1 に答える 1

0

あなたの色はどれくらい違う必要がありますか？理論的には、不透明度または背景色で指定されたアルファ値に基づいて、100 の異なる色を持つことができます。次に、html5 データ プロパティを使用してバーのパーセンテージに一致するようにアルファを変更するだけです。あなたがこのようなことをしたとしましょう：

<div class="progress" data-percentage="<?php echo $percentage; ?>"></div>

.progress {
    background-color: blue;
}

jquery:
$function() {
 $('.progress').css('opacity', $(this).data('percentage'));
}
于 2013-02-08T14:34:26.280 に答える