設置背景CSS精靈圖像寬度

有沒有辦法設置背景CSS精靈圖像寬度？設置背景CSS精靈圖像寬度

<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/

現在上面a標籤60像素寬，30像素爲單詞「店」，30像素的填充左爲車圖標，因爲我使用的背景圖標的CSS精靈，現在它顯示60px的背景圖片，而不是我想要顯示的30px。

我也嘗試過background-size：30px 30px這個標籤，但它不起作用。

來源

2017-02-22 Pat

可以使用僞元素before：

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&amp;text=100)!important; 
    background-repeat: no-repeat; 
    width:30px; 
    height:30px; 
    display:inline-block; 
    content:''; 
    vertical-align:middle; 
}

工作例如：https://jsfiddle.net/mspinks/jb1prcro/2/

來源

2017-02-22 22:42:55

我不知道你想實現什麼，但這裏有一個實際的例子：

https://jsfiddle.net/ozL0yzuy/

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

必須爲元素本身設置一個寬度（實際上也是一個高度，我沒有在這個例子中做過）（在這種情況下，a標籤，只有當它的塊或內嵌塊元素）。然後您可以相應地調整背景位置。

來源

2017-02-22 22:49:11 Johannes

設置背景CSS精靈圖像寬度

回答

相關問題