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

您可以拥有多个背景图片

请参阅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

Answer 2

是的，您可以拥有多个背景图片，但仅限于包装盒商品。 CSS3.info

上有一些相关信息

Answer 3

是的，你可以。简写方法不那么冗长：

.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/

中查看

使用css3和sprite的多个背景图像

3 个答案: