Est-il possible de mettre plusieurs dégradés répétitifs sur une seule image maître d'image-objet? J'ai environ 5 dégradés de 1 px x 400 pixels qui pourraient être combinés pour réduire les demandes de page. C'est à peu près mon dernier endroit où aller pour réduire les demandes d'objets. Je n'ai pas vu de techniques pour cela en cherchant. Ma propre expérimentation n'a pas eu de bons résultats.Sprites et dégradés CSS
En supposant que toutes les zones auxquelles vous appliquez les dégradés d'arrière-plan aient une hauteur inférieure à 400 pixels, vous pouvez appliquer une mosaïque verticale aux cinq sprites pour obtenir une seule image 1x4000 pixels.
Vous pouvez appliquer la partie appropriée de l'image-objet en spécifiant un décalage vertical et en définissant background-repeat:repeat-x.
Le décalage vertical serait 400 * (index of the sprite you want): 0px pour la première, 400px pour le 2ème, 800px pour la 3ème, etc.
Voici mon sans pensée critique réponse immédiate. Est-ce que cela fonctionnera aussi avec des sprites de largeurs impaires? –
Tous les sprites doivent avoir la même largeur, sinon vous aurez des espaces vides entre eux quand ils sont répétés. Cela ne devrait pas être un problème si les sprites sont censés carreler horizontalement de toute façon ... – meagar
Je pensais utiliser des dégradés radiaux, mais je suppose qu'ils devront être linéaires. Donc, vraiment, vous pouvez vous en sortir avec trois sprites en général - toutes vos images de fond statiques, un sprite pour les dégradés linéaires verticaux, et un sprite pour les dégradés linéaires horizontaux. Vraiment cool. Merci. –