使用單個背景圖像爲不同的HTML元素使用CSS sprite

Question

我想問你是否可以對不同的HTML元素使用相同的background-image？

手段，我有HTML代碼（的一部分）：

<div class="src"> 
<form action="#"> 
    <input type="text" class="text" /> 
    <input type="submit" class="submit" /> 
</form> 
</div> 


<div class="menu"> 
<ul class="level1"> 
    <li class="test1"><a href="#">Test1</a></li> 
    <li class="test2"><a href="#">Test2</a></li> 
</ul> 
</div> 

和簡單的CSS

.src { 
background: url(images.png) 0 -45px no-repeat; 
} 

.menu ul.level1 li { 
background: url(images.png) 0 0 no-repeat; 
} 

.menu ul.level1 li.test1 { 
background-position:-15px -120px; 
} 

.menu ul.level1 li.test2 { 
background-position: -50px -120px; 
} 

這是技術好？它佔用較少的HTTP請求？

如何在CSS中寫入通用背景圖片併爲不同的HTML元素使用背景位置？或者不可能？

方式：

.generic { 
background: url(images.png) no-repeat; 
} 

.src { 
background-position: 0 -45px; 
} 

.menu ul.level1 li { 
background-position: 0 0; 
} 

.menu ul.level1 li.test1 { 
background-position:-15px -120px; 
} 

.menu ul.level1 li.test2 { 
background-position: -50px -120px; 
} 

感謝

Answer 1

是的，這是完全正常的。

您可以簡單地聲明的背景圖像將使用它像這樣每一個元素：

.element1, .element2, .element3 { 
background-image:url(image.png); 
background-repeat:no-repeat; 
} 

然後聲明每個元素的背景位置像你這樣做。