边框图像CSS的奇怪行为

Question

我有一个图像，我想用作div的边框和背景。尽管使用background: transparent !important;或background: none !important;（我尝试过两者），下面的代码（和fiddle）会在div中产生不合需要的白色背景。

这是我正在使用的图像：

这是我得到的效果：

这是我想要的效果：

奇怪的是，我可以通过在Chrome中打开Web Inspector并在页面渲染后切换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;
}

因此，如果浏览器可以呈现它，为什么我不能写它？ :)任何帮助/建议都会很棒。

请注意我已经尝试将图片设置为div的background-image而不是border-image，并且也没有产生预期的结果（缩放图像以防止由于div的文本内容是动态的，因此被切断的边界只是猜测太多了。

Answer 1

您缺少fill关键字：standard说：

  

'fill'关键字（如果存在）会导致中间部分   要保留的边界图像。 （默认情况下，它被丢弃，即   被视为空。）

请参阅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;
}