使用单个背景图像为不同的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; 
} 

然后声明每个元素的背景位置像你这样做。