边框图像不会在chrome中渲染块的内部背景

Question

When I'm using the border-image property on a block, the interior portion of the block - where the content would go - remains transparent.

That's while my sprite image has a perfectly opaque white interior.

I can circumvent the problem by adding an internal div with the correct background, but that's unelegant. Is there a way to have the sprite's interior portion display without additional block workarounds? Thanks

Problem demo page (please view in Chrome)

Source:

   <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

I dont know why it is caused , probably a chrome bug.

Here is a fix however.

Add this to your .box css

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

This will add a white background colour and clip it to its contents (including the padding). More info on background-clip can be found here .

---

Working Example.

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

Answer 2

For anybody with the same problem, I just found a more direct fix: the fill property. It seems that in a recent draft for border-image, the default behavior was set to keep the interior of the box transparent . If you want the interior to be rendered from your image sprite, you should add fill . For example,

Turn this: border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;

Into this: border-image: url(image-border_sprite.png) 31 25 25 20 fill / 31px 25px 25px 20px stretch;

From my tests this negates the need for adding a background and clipping it to padding-box (thanks for the answer though).

Answer 3

I got the same error with the border while using the class with attribute. The problem was solved easily when I changed the attribute to . instead of: CSS - img.pic1 {width...} htm -

I used :

CSS - .pic1 {width...} html =

that fixed all the image bugs I had...