이미지의 중간 부분을 잘라내십시오 (예를 들어)?

Question

이것은 Grooveshark에서 한 것처럼 보였습니다. Grooveshark는 확장 가능한 버튼 등 여러 이미지를 사용할 필요가 없도록했습니다.

기본적이

같은 이미지는 이미지 자체보다 작은 임의의 폭의 단추를 생산하는데 사용된다. 나는 이것이 어떻게 든 중간을 잘라내는 것으로 끝났다고 가정하지만, 나는 잘 모릅니다. 나는 그것의 사용법에 대한 CSS 속성을 살펴 봤다. here 그러나 어느 쪽에서도 15px 패딩을 제외하고 무엇을했는지 알 수 없다.

누구나 동일한 효과를 복제하는 방법을 알고 있습니까?

편집 : 단순함을 위해 버튼 하나를 잘라내는 것에 대해 이야기하고 있습니다. 이미지의 중간 부분을 잘라내라고 말하십시오).

Answer 1

. 배경 이미지를 컨테이너 요소에 적용하여 왼쪽 가장자리를 표시하면 오른쪽 가장자리 만 보여주는 다른 요소에 동일한 이미지를 적용 할 수 있습니다. 예를 들어

:

.menu li { 
    background: url(button-sprite.png) 0 0 no-repeat; 
    padding-left: 10px; 
} 

.menu li a { 
    background: url(button-sprite.png) 100% 0 no-repeat; 
    display: block; 
} 

리스트 아이템 이미지의 좌측 에지를 나타낸다. 패딩을 사용하면 다른 요소가 위에 놓일 때 왼쪽 가장자리가 표시됩니다.

앵커 요소는 이미지의 오른쪽 가장자리를 표시하고 텍스트 내용의 필요한 너비까지 자릅니다.

Answer 2

나는 CSS와 같은 이미지를 조작 할 방법이 없다는 것을 알고있다.
나는 당신이 그들이하는 일은 항상 위쪽 이미지와 아래쪽 이미지가 있고, 나머지는 중간 이미지로 채우는 것이라고 생각한다. . 각 측면에도 적용 할 수 있습니다. CSS3 코드를 추가하고 CSS2 코드를 쉽게 결정할 수 있습니다.

이 (CSS3)과 같습니다

.button_horizontal { 
    background: url(topimage) top left no-repeat, 
       url(bottomimage) bottom left no-repeat, 
       url(middleimage) top left repeat-y; 

} 


.button_vertical { 
    background: url(left.png) top left no-repeat, 
       url(right.png) top right no-repeat, 
       url(middle.png) top left repeat-x; 
} 

---

이 (CSS2)과 같을 것이다 : 당신이 sliding doors 기술로 알려져 있습니다 무슨 말을하는지

.top { 
    background: url(top.png) top left no-repeat; 
    width:100%; 
    height:10px; 
} 

.middle { 
    background: url(bottom.png) bottom left no-repeat; 
    width:100%; 
    height:180px; 
} 
.button{ 
    background: url(middle.png) top left repeat-y; 
    width:500px; 
    height:200px; 
} 

<div class="button"> 
    <div class="top">&nbsp;</div> 
    <div class="middle"><p>stuff goes in here :D</p></div> 
</div> 

Answer 3

CSS를 사용하면 배경 이미지를 원하는 위치로 이동할 수 있습니다. 다음과 같은 CSS를 정의하는 데 필요한 배경의 일부로 표시하기 위해 :

.button { 
    background: transparent url(sprite.png) left top no-repeat; 
    display: block; 
    height: 40px; 
    width: 160px; 
} 
.button:hover { 
    background-position: left bottom; 
} 
.button:focus { 
    background-position: left center; 
/* or 
    background-position: left -50%; 
    background-position: left -40px; 
*/ 
} 

Answer 4

@Pixelatron을; 난 당신이 대답을 수락하지만 당신 & 쉬운 솔루션을 도움의 될 수있다이 예제를 확인 알고뿐만 아니라 http://jsfiddle.net/sandeep/CQmJz/

CSS : border-image라고

a{ 
    text-decoration:none; 
    display:inline-block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0; 
    position:relative; 
    padding:8px 0 8px 10px; 
    height:17px; 
} 
a:after{ 
    content:""; 
    display:block; 
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0; 
    position:absolute; 
    height:33px; 
    width:10px; 
    top:0; 
    right:-10px; 
} 


a:hover{ 
    background-position:0 -34px; 
} 
a:hover:after{ 
    background-position:-490px -34px; 
} 

Answer 5

.