CSS Sprite pour les images qui ont des répétitions verticales aussi bien qu'horizontales

Question

J'ai quatre images, dont l'une a une propriété de répétition de l'arrière-plan dans la direction horizontale et trois d'entre elles ont une répétition de l'arrière-plan dans la direction verticale.

J'ai différentes classes CSS qui utilise actuellement ces images comme sous:

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

Voici donc fais demande 4 HTTP et je veux mettre en œuvre Sprite CSS pour les 4 images telles que je peux réduire le nombre de Requête HTTP de 4 à 1, il est également important de garder à l'esprit que nous avons une répétition d'arrière-plan pour toutes les 4 images, soit sur la direction x, soit sur la direction y, et comment l'image-objet doit-elle être créée? CSS pour réduire le nombre de requêtes HTTP.

J'espère que cette question est claire.

Answer 1

Vous pouvez uniquement utiliser des images-objets pour les images qui se répètent dans le même sens. C'est parce qu'il n'y a aucun moyen de limiter la zone répétable par CSS, donc si vous répétez horizontalement, il ne peut y avoir aucune autre image placée le long de l'axe horizontal de la section que vous voulez répéter ou ils seront inclus dans la répétition. Ainsi, les pages ayant arrière-plans répétés dans plusieurs directions pourront être réduites à pas moins de 2 requêtes HTTP pour les images d'arrière-plan.

Vous pouvez créer deux fichiers: un sprite_repeaty.png et un sprite_repeatx.png. Tous vos arrière-plans avec répétition-y peuvent être placés le long du bord supérieur de sprite_repeaty.png. Tous vos arrière-plans avec repeat-x (un seul pour l'instant, mais vous pouvez le configurer pour plus tard) peuvent être placés le long de la bord gauche de sprite_repeatx.png. Si vous avez des icônes ou des arrière-plans qui ne sont pas répétés, ils peuvent être inclus dans l'un ou l'autre de ces fichiers.

Sprites sont plus faciles à maintenir si vous placez les images à intervalles réguliers afin que vous ne devez pas vérifier le fichier lors de l'application de position, vous pouvez simplement définir background-position:0 0;, background-position:0 -100px;, background-position:0 -200px;, etc, selon l'échelle que vous choisissez.

Answer 2

Vous devez répéter manuellement les sprites dans l'image pour ne pas avoir besoin d'une répétition CSS automatique.

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

Cela peut être particulièrement intéressant ou pas, en fonction principalement de la taille de l'image.

Answer 3

Un CSS Spritemap (un sprite se réfère uniquement à 1 image dans le spritemap) n'est pas le Saint-Graal de toutes choses. Vous ne devriez pas essayer de bourrer TOUTES vos images en une, et c'est un bon exemple de quand ne pas, parce que vous allez vous retrouver avec une image de spritmap énorme, tandis que les performances une petite seconde image (tout en ajoutant une autre requête, Je suppose que vous envoyez les en-têtes de cache correct) est l'option plus rapide, plus facile et plus léger.