firefox - 在 Safari 和 Opera 中应用边框图像时不显示背景图像

Question

我将以下 CSS 类应用到我的网站页脚，以显示背景图像和顶部的 3px 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) 中背景只是纯白色。通过 inspect element 删除边框图像可恢复背景。我猜 border-images 基本上被渲染为 background-images 并且因此背景被覆盖，但是有人知道解决方法吗？

Answer 1

您看到白色背景是因为边框图像的中心部分可能是白色的，它绘制在背景图像之上，并且大多数浏览器都实现了 border-image 的实验版本在添加 the fill keyword 之前.

如规范所述:

The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

不支持此 fill 关键字的浏览器(我知道至少 Opera 和 Firefox 不支持，尽管 Firefox will support it as of version 12 )不会丢弃 border-image 的中间部分，而是将其绘制在背景之上。

由于您使用的是 PNG，因此可以确保边框图像的中间部分是透明的。这应该使背景透过它出现。