は、背景のCSSスプライト画像の幅を設定する方法はあり背景のCSSスプライト画像の幅

Question

を設定しますか？今以上aタグが60PX幅、単語「店」の30px、私は背景アイコンのCSSスプライトを使用していますので、カートアイコン、 放置30pxのパディング、ある

<a href="#">shop</a> 

a{ 
    background-image: url(http://placehold.it/60x60/ff0000/000&amp;text=100)!important; 

    background-repeat: no-repeat; 
    display: block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
} 

https://jsfiddle.net/jb1prcro/

今は30pxの代わりにその背景画像の60pxを表示しています。

このAタグの背景サイズ：30px 30pxも試しましたが、動作しません。私はあなたが達成しようとしている正確にわからないけど、ここでは実用的な例ですhttps://jsfiddle.net/mspinks/jb1prcro/2/

Answer 1

あなたは擬似要素beforeを使用することができますhttps://jsfiddle.net/ozL0yzuy/

a { 
    background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 40px; 
    background-position: -10px -20px; 
} 

要素自体（この場合はaタグ）の幅（実際には高さ、これは例では行っていない）を設定する必要があります。このタグはブロックまたはインラインブロック要素）。それに応じて背景の位置を調整することができます。

Answer 2

：

a{ 
    display: inline-block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
    height:30px; 
    vertical-align:middle; 
} 
a:before { 
    background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important; 
    background-repeat: no-repeat; 
    width:30px; 
    height:30px; 
    display:inline-block; 
    content:''; 
    vertical-align:middle; 
} 

の作業例：