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元素删除border-image会恢复背景。我猜测边框图像基本上是渲染为背景图像，因此背景被覆盖了，但有人知道一个解决方法吗？

Answer 1

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

正如规范所述：

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

不支持此fill关键字的浏览器（我知道至少Opera和Firefox不支持the fill keyword）不会丢弃边框图像的中间部分，而是将其绘制在背景之上

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

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

1 个答案: