Firefox 无法加载背景图片答案

【问题标题】：background images not loading in FirefoxFirefox 无法加载背景图片
【发布时间】：2015-06-27 20:42:17
【问题描述】：

这适用于所有浏览器（据我所知），除了 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;
}

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

【问题讨论】：

标签： html css firefox webkit blink

【解决方案1】：

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

另外值得注意的是，它事先只在 Chrome 中对我有效。

【讨论】：