CSS Sprite для изображений, которые имеют как вертикальные, так и горизонтальные повторы

Question

У меня есть четыре изображения, одно из которых имеет свойство повторения фона в горизонтальном направлении, а три из которых имеют повтор фона в вертикальном направлении.

У меня есть разные классы CSS, которые в настоящее время используют эти изображения, как указано ниже:

.sb_header_dropdown {
     background: url(images/shopping_dropdown_bg.gif) repeat-y top left;
     padding: 8px 3px 8px 15px;
 }


 .shopping_basket_dropdown .sb_body {
     background: url(images/shopping_dropdown_body_bg.png) repeat-y top left;
     margin: 0;
     padding: 5px 9px 5px 8px;
     position: relative;
     z-index: 99999;
 }


 .checkout_cart .co_header_left {
     background: url(images/bg.gif) repeat-x 0 -150px;
     overflow: hidden;
     padding-left: 3px;
 }

 .sb_dropdown_footer {
     background: url(images/shopping_dropdown_footer_bg.png) repeat-y top left;
     clear: both;
     height: 7px;
     font-size: 0;
 }

Итак, я делаю 4 HTTP-запроса, и я хочу реализовать CSS Sprite для всех 4 изображений, чтобы я мог уменьшить количество HTTP-запросов с 4 до 1, также следует иметь в виду, что здесь у нас есть повторение фона для все 4 изображения, либо в направлении x, либо в направлении y и так, как должен быть создан спрайт и как его можно использовать в CSS для уменьшения количества HTTP-запросов.

Надеюсь, этот вопрос понятен.

Answer 1

Спрайты можно использовать только для изображений, которые повторяются в одном и том же направлении. Это потому, что нет способа ограничить повторяемую область с помощью CSS, поэтому, если вы повторяете по горизонтали, не может быть никаких других изображений, размещенных вдоль горизонтальной оси фрагмента, который вы хотите повторить, или они будут включены в повтор. Таким образом, страницы с фонами, повторяемыми в нескольких направлениях, можно будет уменьшить не менее чем до 2 HTTP-запросов для фоновых изображений.

Вы можете создать два файла: a sprite_repeaty.png и sprite_repeatx.png. Все ваши фоны с repeat-y могут быть размещены вдоль верхнего края из sprite_repeaty.png. Все ваши фоны с repeat-x (пока только один, но вы можете установить его на потом) могут быть размещены вдоль левого края из sprite_repeatx.png. Если у вас есть значки или фоны, которые не повторяются, они могут быть включены в любой из этих файлов.

Спрайты легче поддерживать, если вы размещаете изображения через равные промежутки времени, так что вам не нужно проверяя файл при применении положения, вы можете просто установить background-position:0 0;, background-position:0 -100px;, background-position:0 -200px; и т. д., в зависимости от выбранного вами масштаба.

Answer 2

CSS Spritemap ( sprite относится только к 1 изображению в spritemap ) не является святым Граалем всех вещей. Вы не должны пытаться объединить ВСЕ ваши изображения в одно, и это хороший пример того, когда этого не делать, потому что в итоге вы получите огромное изображение spritemap, в то время как производительность будет меньше второго изображения (при добавлении другого запроса Я предполагаю, что вы отправляете правильные заголовки кэша) - это более быстрый, простой и легкий вариант.

Answer 3

Вам придется вручную повторять спрайты на изображении, чтобы они были такими длинными, чтобы не требовалось фактического автоматического повторения CSS.

[1][2]\      [3][%][%][%][%][%][%][%][%]
[%][%] |     [4][%][%][%][%][%][%][%][%]
[%][%] |     \_________________________/
[%][%] |              | (horizontal)
[%][%] |— maximum likely dimension of element
[%][%] | (vertical)
[%][%] |
[%][%] |
[%][%]/

Это может или не может быть особенно целесообразно, в первую очередь в зависимости от того, насколько большим должно быть изображение.