여러 위치에 CSS3 다중 배경 이미지

Question

탭 단추의 배경 이미지를 사용하여 탭 메뉴 시스템을 구축하려고합니다.

탭 버튼 이미지는 가로 200px, 세로 40px입니다. 이 탭의 높이를 가변적으로하고 싶기 때문에 사용하고있는 이미지가 탭 버튼 안에 3 개의 다른 위치를 가질 수 있는지 궁금해했습니다. 중심이 유연한 높이를 가진 채로 위쪽과 아래쪽이 둥글게 보입니다.

내 시도입니다. 내가 원하는 결과를 내지 못한다. 작동 방식 :

background-image:url(tabs-large.png); 
background-position:0 0, 0 20px, 0 180px; 
background-size:100% 20px, 100% 100%, 100% 20px; 

Answer 1

현재는 background-image입니다. 이 creates only one layer이므로 0 0 위치와 100% 20px 크기 만 사용 중이며 나머지는 무시됩니다.

tabs-large.png이 전체 탭 이미지를 나타내는 경우, 예를 들어 상단 가장자리, 하단 가장자리 및 가운데 부분의 세 부분으로 슬라이스 한 다음 각 부분을 자체 이미지로 지정해야합니다. 또한 중간 파트가있는 동안 위쪽 및 아래쪽 가장자리가 반복되지 않도록해야합니다.

background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png); 
background-position: 0 0, 0 20px, 0 180px; 
background-repeat: no-repeat, repeat-y, no-repeat; 
background-size: 100% 20px, 100% 100%, 100% 20px; 

이 방법은, 각 이미지는 하나 개의 위치와 하나 개의 크기에 해당하는 동일한 순서 :

는 다음과 같은 코드가 보일 것이다거야.