Как мне повторить часть изображения, используя background-position и CSS sprites?

Question

Я хотел бы создать несколько кнопок с динамической шириной, используя CSS-спрайты и background-position, но я не уверен, возможно ли то, что я хочу ..

Я бы хотел, чтобы кнопка имела левую, среднюю и правую стороны, а середина повторялась по мере необходимости. В идеале мне бы хотелось, чтобы это было одно изображение шириной 11px, поэтому левая и правая стороны имеют ширину 5px, а средняя часть повторяется в 1px. Есть ли какой-нибудь способ, которым я могу определить в CSS использование одного центрального пикселя изображения и повторить, если для требуемой (неизвестной) ширины?

Обычно я использовал два изображения для достижения похожих результатов - одно для сторон и второе изображение шириной 1 пиксель для середины, но если есть какой-то способ их объединения в одно изображение, я бы предпочел использовать это. *

Answer 1

Короткий ответ: это невозможно (или, по крайней мере, не стоит в 99% случаев) со спрайтовой картой, не имеющей разных размеров.

В большинстве случаев спрайт-карта не идеальна для повторяющихся частей фона, хотя она отлично подходит для неповторяющихся частей.

Исходя из того, что вы хотите, хотя, Я бы взглянул на подход с раздвижными дверями к проблеме , похоже, вполне соответствует тому, что вы хотите.