使用css3和精灵的多个背景图像

Question

有什么方法可以使用精灵应用多个背景图像？ 像下面的代码？

background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif"); 
background-position: right -92px, 0px 0px ; 
background-repeat: no-repeat; 
font-size: 1em; 
margin-right: 5px; 
padding-right: 35px; 
width:500px; 
height:500px 

Answer 1

是的，你可以有多个背景图像，但它仅限于盒子项目。这里有一些信息在CSS3.info

Answer 2

是的，你可以。速记方法不太冗长：

.sprite { 
    background: 
    url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat, 
    url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat, 
    #ccc; 
    width: 160px; 
} 

请注意，您只能声明一种背景颜色，并在声明结束时声明它。

看到它在aciton http://jsfiddle.net/TMHPh/

Answer 3

你可以有多个背景图像

看到EXAMPLE

这里是我的CSS：

.sprite_box 
{ 
     background: 
     url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat, 
     url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,   
     transparent;  
     height: 24px;  
     width: 81px; 
     margin:5px; 
}​ 

阅读sprite here

Here you can create sprite image

Here you create css for your sprite image