Firefox中未加载的背景图片

时间:2015-06-27 20:42:17

标签: html css firefox webkit blink

网址:4genderjustice.org

除了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;
}

这是通过浏览器嗅探来完成的(抱歉,但这是我能找到的唯一解决方案)。

1 个答案:

答案 0 :(得分:1)

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

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