使用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