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)中背景只是纯白色。通过检查元素删除边框图像会恢复背景。 我猜测边框图像基本上被渲染为背景图像，因此背景被覆盖，但有人知道解决方法吗？

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 )不会丢弃边框图像的中间，而是将其绘制在背景之上。

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