Question

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

http://samnorris.co.nz

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

Look ma, no background

不知道我做了什么，Chrome不喜欢 - 实际上不是Chrome的大用户（我是火狐人），虽然我意识到这不是网页设计师的借口！在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值，因为它将背景固定到视口的左上角（而不是元素）。更改固定为滚动，您将看到背景（只是为了测试它）

背景在Chrome中无法正确呈现

1 个答案: