背景图像未在 Firefox 中加载

Question

这在所有浏览器中都可以正常工作（据我所知），Firefox 除外。问题是：为什么它在 Firefox 中不起作用？

背景图片设置如下：

#top .homepage-cover-photo{
    position: relative;
}
#top .homepage-cover-photo .x-container {
    position: absolute;
    clip: none;
    clip-path: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: absolute;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

这应该可以在大多数现代浏览器中正常呈现。

（实际的背景图片在各个 .bgimg 元素中设置。）

但是，由于 Chrome/Webkit/Blink（不是 100% 确定，我认为是 Blink，但它也发生在 webkit 浏览器中）没有正确呈现这些内容，我进行了描述 here 的修复:

.Chrome #top .homepage-cover-photo .x-container, 
.Opera #top .homepage-cover-photo .x-container, 
.iPhone #top .homepage-cover-photo .x-container, 
.iPad #top .homepage-cover-photo .x-container,
.Safari #top .homepage-cover-photo .x-container {
    clip: rect(auto,auto,auto,auto);
    clip-path: rect(auto,auto,auto,auto);
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
.Chrome #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.Opera #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPhone #top .homepage-cover-photo .x-column.x-1-1 .bgimg, 
.iPad #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Safari #top .homepage-cover-photo .x-column.x-1-1 .bgimg {
    position: fixed;
    background-attachment: scroll;
    -webkit-transform-style: preserve-3d;
}

这是通过浏览器嗅探完成的（抱歉，但这是我能想到的唯一可行的解决方案）。

Answer 1

只需从 #top .homepage-cover-photo .x-column.x-1-1 .bgimg 中删除 z-index: -3; 即可解决问题。

还值得注意的是，它只在 Chrome 之前对我有效。

背景图像未在 Firefox 中加载

background images not loading in Firefox

html

css

firefox

webkit

blink