백그라운드 위치 및 CSS 스프라이트를 사용하여 이미지의 일부분을 어떻게 반복합니까?

Question

CSS 스프라이트와 배경 위치를 사용하여 동적 너비로 일부 버튼을 만들고 싶습니다. 그러나 원하는 것이 가능한지 확실하지 않습니다.

버튼에 왼쪽, 가운데가 있어야합니다. , 오른쪽은 필요에 따라 중간을 반복합니다. 이상적으로는 11px 너비의 이미지 하나로 구성되어 왼쪽 및 오른쪽면이 모두 5px이고 중간면이 1px 반복되도록하는 것이 이상적입니다. 이미지의 한 가운데 픽셀을 사용하고 필요한 (알 수없는) 너비의 경우 반복 할 CSS에서 정의 할 수있는 방법이 있습니까?

일반적으로 비슷한 결과를 얻으 려면 두 이미지를 사용했습니다. 하나는 옆면 용이고 두 번째 이미지는 중간 용 1px 너비이지만 한 가지 이미지로 결합하는 방법이있는 경우이를 사용하는 것이 좋습니다.

Answer 1

짧은 답변은 다양한 크기가 아니라 스프라이트 맵을 사용하여 가능하지 않습니다 (또는 적어도 99 %의 시간 가치는 아님).

대부분의 경우 스프라이트지도는 배경의 반복 부분에 이상적이지는 않지만 반복되지 않는 부분에 탁월합니다.

당신이 뭘했는지에 따라, I'd take a look at the sliding doors approach to the problem, 꽤 잘 원하는 것 같습니다.