スプライト付きCSSの背景サイズ

Question

私はリストを持っていて、それぞれ<li>はアイコンとテキストを持っています。

アイコンのイメージはスプライトイメージですので、のアイコンをアイコンのサイズにするにはliに設定します。

どのように私はCSSでこれを行うことができますか？

Answer 1

あなたはbackground-size: 32px 32px;ようCSS3で背景画像のサイズを設定することができますが、それは本当にクロスブラウザの互換性はありませんし、私はそれがあなたの懸念があるものですね。

スプライトがうまく配置されていない場合、私のお勧めは少しの余分なマークアップを使用することです。例えば、

<li><span class="ico"></span>This is an li element.</li> 

スタイル適切な高さと背景画像スプライトとspan要素のようなマークアップを使用します。このメソッドを使用すると、li要素は任意の高さを持つことができ、スプライトが密集しているにもかかわらず、適切なアイコンのみが表示されます。

Answer 2

身長を設定する必要があります。 LIのバックグラウンドリピートとパッディングが含まれます。ここで

は便利なチュートリアルです：preview.moveable.com/JM/ilovelists

Answer 3

ここは例です。スプライトを明るい灰色の領域に置き換えてください：http://jsfiddle.net/Pf7Xs/

これはあなたの質問ですか？同じサイズの<li>内にスプライト領域とテキストがある？

ほとんどの場合、line-heightとheightが使用されます。 希望があれば幸いです。

Answer 4

アイコンを含むリストのようなテキストをサポートするイメージの場合、CSS擬似要素を使用する方が良いでしょう。beforeまたは：after。これはあなたのHTMLをきれいに保ちます。

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

li:before 
{ 
    content: ""; 
    width: 1em; 
    height: 1em; 
    background: url("image.png") -12px -12px no-repeat transparent; 
    display: inline-block; 
} 

このテクニックの詳細については、http://css-tricks.com/を参照してください。