使用CSS3和精灵图实现多个背景图片

Question

有没有办法使用sprites应用多个背景图像？类似下面的代码吗？

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

- Joemon

Answer 1

您可以拥有多个背景图像

请查看示例

这是我的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;
}​

阅读有关精灵图的内容

这里可以创建精灵图像

这里可以为您的精灵图像创建CSS

- Suresh Pattu

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;
}

请注意，您只能设置一个背景颜色，并且将其放在声明的末尾。

在此链接中查看实现。

- methodofaction

Answer 3

是的，你可以在多个盒子中使用多个背景图像，但是这种方法的限制在于只能应用于盒子元素。关于这方面的信息可以参见CSS3.info。

- Cole