Несколько фоновых изображений с использованием 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

Вы можете иметь несколько фоновых изображений

см. ПРИМЕР

Вот мой 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здесь

Здесь вы можете создать спрайт-изображение

Здесь вы создадите CSS для вашего спрайт-изображения

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

Обратите внимание, что вы можете указать только один цвет фона и указать его в конце объявления.

Смотри в действии http://jsfiddle.net/TMHPh/

Answer 3

Да, у вас может быть несколько фоновых изображений, но оно ограничено рамками. Есть некоторая информация об этом в CSS3.info