Question

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

显示前两个背景图像，但＃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/

background-attachment：fixed和background-size：cover使图片在Chrome中消失

1 个答案: