Прикладные тонкости
Естественно, рассматривая набор возможных эффектов при использовании фоновых изображений стоит отметить следующие:
Объект, полностью заполненный фоновым изображением. Здесь основную роль играют конечные размеры объекта (конечно, если изображение не повторяется по всем осям сразу: в таком случае использовать его для CSS Sprites не представляется возможным). Довольно часто фон под объектом может меняться в зависимости от каких-либо условий (преднамеренный акцент или действия со стороны пользователями), но для логики создания CSS Sprites это несущественно. Здесь же можно выделить три подслучая, соответствующих неповторяющемуся фону и повторяющему по оси X или Y.
Фоновое изображение заполняет не весь предоставленный ему объем (либо размеры объекта не заданы, либо заданы в относительных — em, % — единицах). Тут нам необходимо либо прикреплять повторяющееся изображение «в конец» спрайта, чтобы на той части объекта, что осталась без фонового изображения, не проявлялось никаких дефектов. Либо (в случае no-repeat) расположить изображения «лесенкой» (это особенно актуально в случае фона для элементов списка). Стоит отметить, что в зависимости от значения background-position CSS Sprites здесь могут быть как возможны, так и не возможны в принципе (например, в случае 100% 100%). Тут можно выделить еще несколько случаев, различающихся по background-position,background-repeat и линейными размерами блока.
Изображение является анимированным. Поскольку далее речь пойдет о применении PNG и JPEG-изображений для CSS Sprites, то анимированные изображения придется сразу выбросить из рассмотрения: поддержка анимированных PNG-изображений находится сейчас на самом зачаточном уровне в браузерах.
Все описанные примеры можно более четко структурировать по следующим группам.
background-repeat: no-repeat, background-position: абсолютные числа, и заданы линейные абсолютные размеры.
background-repeat: no-repeat, background-position: абсолютные числа, линейные размеры не заданы или заданы в относительных единицах.
background-repeat: repeat-x, задана высота элемента.
background-repeat: repeat-x, высота элемента не задана.
background-repeat: repeat-y, задана ширина элемента.
background-repeat: repeat-y, ширина элемента не задана.
background-repeat: no-repeat, background-position: 100% 0, задана высота элемента.
background-repeat: no-repeat, background-position: 0 100%, задана ширина элемента.
background-repeat: no-repeat, background-position: 100% 0, высота элемента не задана.
background-repeat: no-repeat, background-position: 0 100%, ширина элемента не задана.
background-repeat: repeat.
background-repeat: repeat-x или background-repeat: repeat-y, размеры элемента указаны в относительных единицах.
background-repeat: no-repeat, background-position: в относительных единицах.
изображение является анимированным GIF-файлом.
Глядя на эту спецификацию становится, в общем, понятно, в каком направлении двигаться для автоматизации создания CSS Sprites.