0

gd 星評価プラグインでは、星のステータスを表示するための css スプライト画像を取得し、その幅を調整して、アイテムが評価されている星の数を示します。

たとえば、バックグラウンドで「gd-star-rating/stars/oxygen/stars20.png」という画像を使用します。

たとえば、星が 3 つあるので、幅は 60px です。

.starsbar.gdsr-size-20 a.s3 {
width: 60px;
}

グローバルコードは次のとおりです。

.gdsr-oxygen .starsbar.gdsr-size-20 a:hover {
background: url('../stars/oxygen/stars20.png') repeat-x 0px -20px !important;
}

私の質問は、カスタム画像を使用してこれらの星の色を変更するにはどうすればよいですか? 持ちたい

赤 - 星 1 つ 黄 - 星 2 つ

そして徐々に、5つ星の緑。

それは達成可能なものですか？

4

1 に答える 1

0

スターのクラスを追加または変更し、それに基づいてより具体的にスタイルを適用できます。

.gdsr-oxygen .starsbar.gdsr-size-20 a {
  background: url('../stars/oxygen/stars20.png') repeat-x 0px -20px !important;
}

.gdsr-oxygen .starsbar.gdsr-size-20 a.red {
  background: url('../stars/oxygen/stars20_red.png') repeat-x 0px -20px !important;
}

元のスプライトを拡張し、その位置を変更して赤または黄色の星を表示することもできます。

.gdsr-oxygen .starsbar.gdsr-size-20 a.red {
  background-position: 0px -40px !important;
}
于 2013-03-04T21:41:23.693 に答える