google-chrome - 背景附件：固定和背景大小：封面使图像在 Chrome 中消失

Question

我认为这是 Chrome 的常见问题，但我找不到解决方法。

在这里查看我的代码（jsfiddle）

前两个背景图片已显示，但 #sec3 和 #sec4 的背景图片不会出现在 Mac OS 上的 Chrome 中。Firefox 和 Safari 运行良好...

当我将部分的高度更改为小一点时，将显示第三张图像...：

.main_section {
     height: 700px;
}

你知道是什么原因造成的吗？它也发生在 Windows 或 Linux 上吗？你知道解决这个问题还是我做错了什么？

谢谢，

尼克 =)

Answer 1

这是您在 jsfiddle 中的当前代码：

HTML：

<section class="main_section" id="sec1" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Start</h1>
    </article>
</section>

<section class="main_section" id="sec2" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>

</section>

<section class="main_section" id="sec3" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

<section class="main_section" id="sec4" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

CSS：

.main_section {
    height: 1000px;
}

#sec1 {
    background: url("http://farm4.staticflickr.com/3718/9321223260_700efbede4_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec2 {
    background: url("http://farm8.staticflickr.com/7422/9320632979_1cc63b1320_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec3 {
    background: url("http://farm3.staticflickr.com/2863/9322473736_76944327d5_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec4 {
    background: url("http://farm4.staticflickr.com/3719/9319325635_14e101bbdb_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.section_details {
    background-color: white;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

这似乎是 Google Chrome 中的一个错误。在当前版本的 Chrome 中，这确实发生在 Linux 上。

您可以应用以下属性

.section_details {margin: 1px;}

为了解决显示问题。由于我不是 Chromium 开发人员，因此我无法告诉您这“修复”了它的幕后情况，但祝你好运！:) 希望这将很快得到解决。

如果您不希望实际显示边距，您可以添加

.section_details {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

也是。

编辑：在 jsfiddle 中查看：http: //jsfiddle.net/jjordanca/4Rwze/1/