CSS的边框图片透明度问题

Question

我有一张图片，使用CSS添加了边框。但是在Chrome浏览器中，它不能填充div的中心部分，并且是透明的。

当我将背景设置为白色时，会影响边框的透明度，因此我无法这样做。是否有其他方法解决这个问题（当然要跨浏览器兼容）？

#post-wrap {
    margin:auto;
    padding: 0px 40px 70px 40px;
    width: 850px;
    border-width: 96px 17px 15px 36px;
    -moz-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    -webkit-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    -o-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png)     96 17 15 36 repeat;
}

- nicole

---

请正确格式化您的代码。不要使用 > 来格式化代码；请改为每行缩进四个空格。 - BoltClock

将第二个 div 放在第一个 div 内部，并将其背景颜色设置为白色是一个不错的想法。 - Pekka

然而，在Chrome浏览器上，它没有用适当的颜色填充div的中心，并且是透明的。不，它确实有填充盒子内容。您的“border-image”在中心块中是白色的，因此会填充框的内容。您必须使图像的该部分透明。 - c69

我创建了一个 jsFiddle，比上面的截图更好地突出了这个问题：http://jsfiddle.net/Vf3qj/ - Drew Noakes

Answer 1

你只需要添加“fill”即可包括背景。

border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png)     96 17 15 36 fill repeat;

- Jez

Answer 2

与其使用边框图像，我认为我会将这个图像设置为我的 div 的背景，并使用填充来定位文本...

#post-wrap {
    margin: auto;
    padding: 0px 40px 70px 40px;
    background: transparent url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) no-repeat top left;
}

- arnonate