테두리 이미지 채우기가 이상합니다

테두리 이미지를 채우기와 함께 사용하면 전체 이미지로 채워지지 않고 따로 따로 채워지므로 채우기에 텍스처가있어 좋지 않습니다. 내가 무엇을 할 수 있을지? 여기테두리 이미지 채우기가 이상합니다

<td class="heading"> 
     This is a heading 
    </td> 

<style> 
.heading { 
padding:10px; 
border-style: solid; 
border-width: 27px 51px 27px 27px; 
-moz-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat; 
-webkit-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat; 
-o-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat; 
border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 fill repeat; 
} 
</style>

jsFiddle : 나는 당신의 이미지가 이상적인 선택이 아니라고 제퍼슨과 일치해야

enter image description here

출처

2013-03-06 rlb.usa

먼저 테이블을 사용하는 이유를 알 수 없습니다. 대신 div를 사용해보세요. 또한 400 x 400 픽셀의 테두리 이미지를 사용하고 있습니다. 맞지 않을 것입니다. 정확히 무엇을 달성하려고하는지 설명해 주시겠습니까? – Jefferson

두 번째로, 이미지가 수직으로 반복하기에는 좋지 않습니다. 채우고있는 컨테이너가 그 이미지보다 크다면, 그것은 어색 해 보일 것입니다. – Brant

http://jsfiddle.net/zWygk/. 귀하의 질문에 대한 정확한 답변은 "다른 이미지를 얻으십시오!"입니다. 자세한 내용은 Chris의 기사를 참조하십시오. http://css-tricks.com/understanding-border-image/

요약하면 이미지는 총 9 개의 슬라이스로 구성되어야합니다. 코너의 경우 4, 실제 테두리/측면의 경우 4, 빈칸의 경우 1

경계 너비가 높이를 초과하면 슬라이스가 늘어납니다 (상단/아래쪽 테두리) 또는 너비 (왼쪽/오른쪽 테두리). 다른 차원 만 인수 repeat/stretch로 설정할 수 있습니다.

출처

2013-03-07 16:26:32

테두리 이미지 채우기가 이상합니다

답변

관련 문제