組合背景畫面位置的元素與位置的圖像精靈

Question

我有一個元素（H3），我想設置背景姿勢要正確，很容易：

background: url('/images/icon-popular.png') no-repeat right center; 

但我想用.png文件在那裏我有很多其他的圖標（圖片精靈），通常我做的：

background-image: url('/images/icons-info.png'); 
background-position: 0 -110px; 

如何合併在元素「權中心」的位置在文件中的背景位置？

Answer 1

這裏有一個類似的線程像你這樣的：Using Css Sprites and background position

但我個人我會做什麼來實現這一效果，使用僞選擇像h3:before，風格它在精靈和位置的圖標的大小匹配元素在h3的右側。

h3 { 
    background-color: #faa; 
    padding:5px 10px; 
} 

h3:before { 
    float: right; 
    display: block; 
    content: ""; 
    width: 35px; 
    height: 23px; 
    background: transparent url('https://jsfiddle.net/img/logo.png') no-repeat left top; 
} 

https://jsfiddle.net/3sdj4tga/

你的方法可能的問題是，如果一個h3需要更多的空間比你在你的精靈已經分配時，圖像的其他部分會顯示出來給人一種不良的影響。