테두리 이미지로 이상한 동작 CSS

Question

div의 테두리와 배경으로 사용하고 싶은 이미지가 있습니다. 아래 코드 (및 fiddle)는 background: transparent !important; 또는 background: none !important; (두 가지를 모두 시도 했음)을 사용 하긴하지만 바람직하지 않은 흰색 배경을 div 내에 생성합니다.

:

여기

내가지고있어 효과입니다 : 여기

내가 사용하고 이미지의3210

는 여기에 내가 원하는 효과입니다 : 이상하게

, 내가 크롬에서 웹 인스펙터를 열고 페이지 렌더링 후 border-image 속성을 전환하여 원하는 효과를 얻을 수 있습니다. 간단히에 다시 border-image 전원을 켜고, 나는 그 결과 내가 원하는 얻을 :

HTML

<div>test</div> 

CSS

브라우저가 렌더링 할 수있는 경우

div { 
    -webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */ 
    -o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */ 
    border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; 
} 

그래서, 나는 왜 그것을 쓸 수 없습니다? :) 어떤 도움이나 제안이라도 좋을 것입니다.

을 유의하시기 바랍니다 이미 사업부의 background-image 대신 border-image의 그 중 하나 (잘라 얻기에서 국경을 방지하기 위해 이미지 크기 조정 원하는 결과를하지 않았다가 이후 단순히 너무 많은 추측 일이었다로 이미지를 설정 시도 div의 텍스트 내용은 동적입니다.

Answer 1

당신은 fill 키워드를 결여하고 다음 standard는 말한다 :

'채우기'키워드가 존재하는 경우 국경 - 이미지의 중간 부분이 보존됩니다. 기본적으로 삭제되며, 즉 은 비어있는 것으로 처리됩니다.)

updated fiddle : 30 30 fill이 문제를 해결하는 것으로 보입니다.

Answer 2

이 기능이 작동합니까? http://jsfiddle.net/qazLuyxh/9/

div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 40px; 
    width: 520px; 
    height: 320px; 
    background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat; 
    color: #FFB9B9; 
    font: bold 24px/41px'fontname', Helvetica, sans-serif !important; 
    background-size: 100%; 
} 

Answer 3

JSFiddle - Click Here

어쩌면 이것은 당신을 도울 것입니다. 그냥 어둠 속에서 촬영.

#block { 
background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png"); 
height: 100%; 
width: 450px; 
background-repeat: no-repeat; 
} 


#block .blocktext { 
padding: 50px; 
}