2

当我在块上使用border-image 属性时，块的内部部分——内容所在的地方——保持透明。

那时我的精灵图像有一个完全不透明的白色内部。

我可以通过添加具有正确背景的内部 div 来规避这个问题，但这并不优雅。有没有办法让精灵的内部部分显示而无需额外的块变通方法？谢谢

问题演示页面（请在 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>
4

3 回答 3

0

我不知道为什么会这样，可能是 chrome 错误。

然而，这是一个修复。

将此添加到您的.boxCSS

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

这将添加白色背景颜色并将其剪辑到其内容（包括填充）。更多信息background-clip可以在这里找到。

工作示例。

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

于 2012-08-22T11:50:48.203 回答
0

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

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

变成这样：border-image: url(image-border_sprite.png) 31 25 25 20填充/31px 25px 25px 20px 拉伸；

从我的测试来看，这消除了添加背景并将其剪切到填充框的需要（尽管感谢您的回答）。

于 2012-08-30T18:44:53.530 回答
0

在使用具有属性的类时，我在边框上遇到了同样的错误。当我将属性更改为 . 而不是：CSS - img.pic1 {width...} htm -

我用了 ：

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

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

于 2013-07-14T11:03:59.693 回答