Hành vi lạ với CSS hình ảnh biên giới

Question

Tôi có hình ảnh mà tôi muốn sử dụng làm đường viền và nền của div. Mã bên dưới (và fiddle) tạo nền trắng không mong muốn bên trong div mặc dù sử dụng background: transparent !important; hoặc background: none !important; (Tôi đã thử cả hai).

Dưới đây là hình ảnh tôi đang sử dụng:

Dưới đây là hiệu ứng tôi nhận được:

Dưới đây là tác dụng Tôi muốn:

Kỳ lạ thay, tôi có thể đạt được hiệu quả mong muốn bằng cách mở Web Inspector trong Chrome và chuyển đổi qua lại các border-image tài sản sau khi hiển thị trang. Đơn giản chỉ cần xoay border-image off và trở lại, tôi nhận được kết quả tôi muốn:

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; 
} 

Vì vậy, nếu trình duyệt có thể làm cho nó, tại sao tôi không thể viết nó? :) Bất kỳ trợ giúp/gợi ý sẽ là tuyệt vời.

Xin lưu ý Tôi đã cố gắng thiết lập các hình ảnh là của background-image thay vì border-image và điều đó không tạo ra kết quả mong muốn một trong hai (co giãn hình ảnh để ngăn chặn biên giới khỏi bị cắt đứt div chỉ đơn giản là quá nhiều công việc đoán từ nội dung văn bản của div là động).

Answer 1

Bạn đang thiếu từ khóa fill: các standard nói:

Từ khóa ‘điền’, nếu có, làm cho phần giữa của biên giới hình ảnh để được bảo tồn. (Theo mặc định, nó bị hủy, tức là, được coi là trống.)

Xem updated fiddle: viết 30 30 fill dường như giải quyết được sự cố của bạn.

Answer 2

Công cụ này có phù hợp với bạn không? 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

Có thể điều này sẽ giúp bạn. Chỉ cần chụp trong bóng tối.

#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; 
}