border-image不在chrome中渲染块的内部背景

Question

当我在块上使用border-image属性时，块的内部部分-内容所在的位置-仍然是透明的。

那是因为我的sprite image有一个完全不透明的白色内饰。

我可以通过添加一个具有正确背景的内部div来绕过这个问题，但这并不优雅。有没有一种方法可以在不增加块的情况下显示精灵的内部部分？谢谢

Problem demo page (请在Chrome中查看)

来源：

   <style type="text/css">
    body { background: orange; padding: 30px; }
    .filling { background: white; height: inherit; margin-top: -16px; }
    .box {
        margin: auto auto;
        width: 200px; height: 200px;
        border-width: 31px 25px 25px 20px;
        -moz-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -webkit-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -o-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
    }
</style>

<div class="box">
    <p>Why does the page background show through??</p>
</div>
<br /><br />
<div class="box">
    <div class="filling">
        <p>It should look like this!</p>
    </div>
</div>

Answer 1

我不知道为什么会这样，可能是一个chrome bug。

然而，这里有一个解决方案。

将此添加到您的.box css

-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: white;

这将添加一个白色背景色，并将其裁剪到其内容(包括填充)。有关background-clip的更多信息，请访问here。

工作示例。

http://jsfiddle.net/blowsie/u8ctc/

Answer 2

对于任何有同样问题的人，我刚刚找到了一个更直接的解决方法：fill属性。似乎在最近的边框图像草案中，默认行为被设置为保持框的内部透明。如果希望从图像精灵渲染内部，则应添加fill。例如,

转这个: border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch；

转到这里: border-image: url(image-border_sprite.png) 31 25 25 20 fill / 31px 25px 25px 20px stretch；

根据我的测试，这就不需要添加背景并将其裁剪到padding(不过还是要感谢你的回答)。

Answer 3

在使用带有属性的类时，我得到了与边框相同的错误。当我将属性更改为时，这个问题就很容易解决了。而不是: CSS - img.pic1 {width...} htm -

我使用：

CSS - .pic1 {宽度...} html =

修复了我所有的图像错误...