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：< / p>

.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

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

另外值得注意的是，它之前只能在Chrome中使用。

Firefox中未加载的背景图片

1 个答案: