2

ランキング アプリにアイコンを使用する必要があります。

icon-star-empty を使用して 5 つの空の星のアイコンから始めたいと思います。

そして、それらを icon-star と重ねて、ランクに基づいて埋めます。

font-awesome には、空の星が半分しかなく、星の半分が欠けています。

私の目標を達成するためにアイコンを重ねることができるかどうか誰かが知っていますか?

編集: これは 5 つの完全に空の星のアイコンのコードです。

<i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"></i></i></i></i></i>

そして、これと重ねたい：<i class="icon-star-half icon-large"></i> 10x

4

1 に答える 1

7

私が正しく理解している場合、これはあなたがやろうとしていることです：

<div id="empty">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
</div>

<div id="half">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
</div>

<div id="full">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
<img class="stars starfull" src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_15.png">
</div>

各ケースを div で囲みました。試している方法で画像を重ねるには、絶対位置を割り当てる必要があります。次に、それがどのように機能するかを示す高速な CSS を示します。

div {
    position:relative;
    height:2em;
}
.stars {
    position:absolute;
    top:0;
    left:0;
}

これがあなたがやろうとしていたことであることを願っています。これは、任意の種類の html タグ要素に適用でき、10 回、100 回 =) 必要な回数だけ適用できます。

編集： あなたの質問とすべてのコメントをもう一度読みました...そして、背景を変更したり、html要素を重ねる代わりに背景を重ねたりするだけで、これを簡単に行うことができると思います。上記のコードを使用して、フィドルで何を意味するかを説明しました：http://jsfiddle.net/38vHj/

とにかく、JavaScript（またはphp、または情報を処理したい場所）でクラスを交換する方がはるかに簡単です...そして、特定のcssクラスセレクターを使用します。

最終的な解決策: そうです... html タグ要素を重ねることができます! 何度も行ったり来たりした後、私はあなたが望むものを正確に書き、それをフィドルに投稿しました：jsfiddle.net/ddXDp/2

したがって、最終結果は、半星要素の下に空の星要素が追加されます。あとは、必要に応じて要素を配置してスタイルを設定するだけです =)

于 2013-02-27T13:46:32.867 に答える