2

複数の画像用にcssスプライト画像を作成しました。スプライトのCSSは次のとおりです。

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

次に、このスプライトの最初の画像をli要素に割り当てます。現在、最初の画像は、このliのbackground：urlプロパティを使用して次のように割り当てられています。

li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)

スプライトから最初の画像を取得してli要素に割り当てるにはどうすればよいですか。私は使用を提案する例を見ました：

<div class="sprites" id="image_5306605314403955_gif"></div>

しかし、HTMLの追加を回避できるかどうかを確認し、その目的でのみCSSを使用したいと思います。私のページのli要素は次のようになります。

<li><a href="http://www.xyz.com">ABC</a></li>
4

2 に答える 2

1

それがあなたが探しているものかどうかはわかりませんが、以下のコードはそれを行うはずです:

HTML:

<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>

CSS:

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

探しているのがclassorを使用しない場合、CSS にはアイテム (同じクラスから継承されている)idを区別するための識別子が必要なため、それは不可能だと思います。<li>

于 2012-11-04T11:26:24.993 に答える