私のカスタム弾丸リストの背景の背景画像の幅/高さを制限する方法は？

Question

カスタム箇条書きリストを作成しようとしています。しかし、私は同じbackground-imageを使用したいが、私は持っているbackground-position（クールな効果を与える）

CSSを変更すると、次のとおりです。

#sidebar ul{ 
    width:190px; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

#sidebar li{ 
    border-top:1px dashed #ddd; 
    background:#FAFAFA url('./images/bullet.png') no-repeat 15px 9px; 
} 

#sidebar li:hover{ 
    background-color:#fff; 
    background-position:15px 0px; 
} 

#sidebar li a{ 
    display:block; 
    padding:5px 20px 5px 26px; /*26 to give extra 6px for the bullet*/ 
} 

弾丸の変更が正しく、すべてがOKです。 。私は他の弾丸を非表示にする方法があるかどうかを知りたい

:(両方の弾丸が常に表示されていることを除いて

オプション（高さよりも、これまで意志非常に遠く離れて画像を広めるために可能性があり）これは単なる悪い考えですが、大きな画像サイズを持つことは望ましくありません。

私は他の方法でも公開しています。

Answer 1

このようなことをするのが良いと思います。

<li><span></span></li> 

。

li { position: relative; } 
li span { 
    position: absolute; 
    left: 0; 
    width: 16px; 
    height: 16px; 
    margin-right: 16px; 
    background: url('img.jpg') 0 0 no-repeat; 
} 
li:hover span { background-position: 0 -16px; }