html - 背景无法在 Chrome 中正确呈现

Question

或者根本不渲染，我应该说......

http://samnorris.co.nz

在34.0.1847.131版本中测试，我的两个固定背景部分没有显示，例如:

不知道我做了哪些 Chrome 不喜欢的事情——实际上我不是 Chrome 的大用户(我是 Firefox 用户)，尽管我意识到这不是网页设计师的借口!在 Firefox 中运行良好。

是不是多背景技术与 Chrome 不兼容之类的？ (因为我刚刚意识到只有这两个部分使用它)

我检查过它不是像 AdBlock 插件那样愚蠢的东西阻止加载某些东西，但事实并非如此..

.spacesuit-bg 和 .interact-bg 是两个罪魁祸首，它们的 CSS 有点相似......

.spacesuit-bg {
    background: url("../img/spacesuit-bg.jpg") no-repeat 0 0;   
    color: #fff;
    height: 680px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transform: translate3d(0,0,0);
    display: block;
}

.multiplebgs .spacesuit-bg {
    background-image: url("../img/tech-seperator.png"), url("../img/tech-seperator-bottom.png"), url("../img/spacesuit-bg.jpg");
    background-position: 0 0, 0 bottom, center bottom;
    background-repeat: repeat-x, repeat-x, no-repeat;
    -webkit-background-size:auto auto, auto auto, !important;
    -moz-background-size:auto auto, auto auto, cover!important;
    -o-background-size:auto auto, auto auto, !important;
    background-size:auto auto, auto auto, cover !important;
}


@media only screen and (min-width: 1200px) {
    .spacesuit-bg {
        -moz-background-size:cover;
        background-size:cover;
    }
}
@media only screen and (min-width:1240px) {
    .spacesuit-bg {
        background-attachment: scroll, scroll, fixed;
    /*    min-height: 800px; */
    }
}
@media only screen and (min-width:2503px) {
    .spacesuit-bg {
        -webkit-background-size:auto auto, auto auto,;
        -moz-background-size:auto auto, auto auto, cover;
        -o-background-size:auto auto, auto auto,;
        background-size:auto auto, auto auto, cover;
        max-height: 0;
        padding: 400px 0;
    }
}

第二个无背景部分:

.interact-bg {
    background: transparent url("../img/interact-bg.jpg") no-repeat 0 0;    
    color: #fff;
    display: table;
    max-height: 980px;
    padding: 20% 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    -webkit-transform: translate3d(0,0,0);  
}
.multiplebgs .interact-bg {
    background-image: url("../img/interact-seperator.png"), url("../img/interact-seperator-bottom.png"), url("../img/interact-bg.jpg");
    background-position: 0 0, 0 bottom, center bottom;
    background-repeat: repeat-x, repeat-x, no-repeat;
    background-size: auto auto, auto auto, cover!important;
}


@media only screen and (min-width: 1200px) {
    .interact-bg {
        background-size: cover;
    }
}
@media only screen and (min-width:1240px) {
    .interact-bg {
        background-attachment: scroll, scroll, fixed;
    }
}
@media only screen and (min-width:2503px) {
    .interact-bg {
        background-size: auto auto, auto auto, cover;
        max-height: 0;
        padding: 400px 0;
    }
}

.interact-wrapper {
    width: 100%;
}

.interact-wrapper:before { 
    /* this is the important part */ 
    content: ''; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
    vertical-align: middle; 
    /* this just takes care of whitespace added by having display:inline-block (there are other methods) */ 
    margin-left: -0.25em; 
}

Answer 1

问题是 background-attachment 属性(对于我的浏览器宽度来说:

@media only screen and (min-width:1240px) {
.interact-bg {
    background-attachment: scroll, scroll, fixed;
}

或更详细地说明 fixed 值，因为它将背景固定在视口(viewport)(而非元素)的左上角。将 fixed 更改为滚动，你会看到背景(只是为了测试它)