背景无法在Chrome中正确显示

Question

还是根本不渲染，我应该说...

http://samnorris.co.nz

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

不知道我做了Chrome不喜欢的事情-实际上不是Chrome的大用户（我是Firefox使用者），尽管我意识到这并不是Web设计师的借口！ 在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-attachement属性（对于我的浏览器宽度，它是：

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

或更详细地讲fixed值，因为它将背景fixed在视口（而非元素）的左上方。 更改为固定滚动即可看到背景（仅对其进行测试）