2

我将以下 CSS 类应用到我的网站页脚，以同时显示背景图像和顶部的 3 像素 3 色调边框。

.site-footer {
    background-image: url(../img/footer-background.png);
    background-repeat: repeat;
    border-width: 3px 0px 0px;
    padding: 15px 0;
}

.border-image {
    -webkit-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
       -moz-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
         -o-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
            border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
            border-width: 2px 0px 0px 0px;
}

在 Chrome (18) 中很好，但在 Firefox (Mac 10.0.2 和 11) Safari (Mac 版本 5.1.5 (7534.55.3)) 和 Opera (Mac 11.62) 中背景只是纯白色。通过检查元素删除边框图像会恢复背景。我猜边框图像基本上被渲染为背景图像，因此背景被覆盖，但有人知道解决方法吗？

4

1 回答 1

2

您看到的是白色背景，因为大概边框图像的中心部分是白色的，它绘制在背景图像的顶部，并且大多数浏览器在添加关键字之前实现了实验border-image版本。fill

正如规范所描述的：

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

不支持这个 fill 关键字的浏览器（我知道至少 Opera 和 Firefox 不支持，尽管Firefox 从版本 12 开始支持它）不会丢弃边框图像的中间，而是将其绘制在背景之上.

Since you're using PNGs, you can make sure that the middle piece of your border-image is transparent. That should make the background appear through it.

于 2012-04-16T15:51:25.390 回答