Comment est-ce que je répète une partie d'une image en utilisant la position d'arrière-plan et les sprites CSS?

Question

Je voudrais créer des boutons avec une largeur dynamique en utilisant les sprites CSS et la position de fond, mais je ne suis pas sûr si ce que je veux est possible ..

Je voudrais que le bouton ait un côté gauche, au milieu et à droite, avec le milieu qui se répète au besoin. Idéalement, je voudrais que ce soit composé d'une image de 11px de large, donc les côtés gauche et droit sont tous les deux 5px de large et le milieu est 1px répété. Y a-t-il un moyen que je peux définir en CSS pour utiliser le pixel central de l'image et répéter si pour la largeur requise (inconnue)?

Normalement, j'ai utilisé deux images pour obtenir des résultats similaires - une pour les côtés et une seconde pour 1px pour le milieu, mais s'il y a un moyen de les combiner en une image, je préfère l'utiliser.

Answer 1

La réponse courte est ceci n'est pas possible (ou au moins, ne vaut pas 99% du temps) avec une carte de sprite, pas avec des dimensions variables.

Dans la plupart des cas, une map-sprite n'est pas idéale pour les parties répétitives d'un arrière-plan, bien qu'elle soit excellente pour les parties non-répétitives.

Basé sur ce que vous recherchez, I'd take a look at the sliding doors approach to the problem, semble correspondre à ce que vous voulez plutôt bien.