Question

使用谷歌搜索无法找到关于此的一件事，所以我在这里，真的希望有人能告诉我这里我做错了什么。

这是CSS：

.section {
    overflow: hidden;
    position: relative;
}

.section.blue {
    color: #000;
    background-color: #0085ca;
}

.section.blue {
    color: #FFF;
}

.section .parallax-img {
    padding-bottom: 52%;
    position: relative;
  background-size: contain;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: top;
}

.section-content {
    padding: 3em 1em;
    max-width: 850px;
    margin: 0 auto;
}

.section-content.center {
    text-align: center;
}

.section p {
    font: normal 400 1em/1.375em "jaf-bernina-sans-n4", "jaf-bernina-sans", Arial, Helvetica;
    margin: 0 0 1em 0;
}

.section a {
    color: #000;
    text-decoration: underline;
}

.section a:hover {
    color: #B20000;
    text-decoration: underline;
}

.section a.button {
    margin-top: 2em;
}

.section ul {
    list-style: square outside;
    margin: 0 0 1.5em 1.125em;
    padding: 0;
}

.section ul li {
    line-height: 1.375em;
    margin-bottom: 0.125em;
}

.section ol {
    list-style: decimal outside;
    margin: 0 0 1.5em 1.125em;
    padding: 0;
}

.section ol li {
    line-height: 1.375em;
    margin-bottom: 0.125em;
}

这是HTML：

<div class="page-container">


                    <div class="section blue">


                            <div class="parallax-img" style="background-image: url(http://dev.lakinmilling.com/wp-content/uploads/2017/11/feed-bags.jpg);" data-rjs="2"></div>


                            <div class="section-content center">

                    <p><span class="intro-quote">&#8220;For Good Horsekeeping Since 1960&#8221;</span><br />
Lakin Milling company pioneered high quality, nutritionally complete, pelleted horse feed in the Southwest, after Chuck Laken introduced the concept in 1960.</p>


                </div>
            </div>



                    <div class="section">

                            <div class="parallax-img" style="background-image: url(http://dev.lakinmilling.com/wp-content/uploads/2017/11/horses.jpg);" data-rjs="2"></div>

                            <div class="section-content">


                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et venenatis massa. Phasellus ultrices lobortis fringilla. Integer consectetur gravida lectus vel iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum suscipit ex eu libero suscipit pharetra. Donec ut justo laoreet, vehicula enim ac, condimentum turpis. Pellentesque quis tortor non enim placerat consequat. Praesent lacinia nisi nibh, a consectetur mi laoreet et.</p>


                </div>
            </div>



                    <div class="section">

                            <div class="parallax-img" style="background-image: url(http://dev.lakinmilling.com/wp-content/uploads/2017/11/feed-bags.jpg);" data-rjs="2"></div>

                            <div class="section-content">


                    <p><strong>Highest Quality—and Nutritionally Complete</strong><br />
Donec mattis elementum libero. Suspendisse luctus porta ipsum, in tristique justo tincidunt nec. Maecenas non aliquam orci. Aliquam tempus dolor in quam tempor, sed dictum orci scelerisque. Fusce ut lectus urna. Aliquam ac libero tincidunt tellus tempus fringilla. Etiam condimentum, mi ut finibus lobortis, quam nunc imperdiet nunc, id fermentum massa lectus in quam.</p>
<div style="text-align: center; margin-top: 4em;">
<img src="http://dev.lakinmilling.com/wp-content/uploads/2017/11/KER-logo.jpg" alt="KER Logo" width="284" height="159" />
</div>


                </div>
            </div>


                    <div class="section blue">




                            <div class="section-content center">

                    <p>&#8220;Nunc blandit orci sed nunc cursus, in finibus orci tristique. Praesent eget justo sit amet urna eleifend euismod ut sit amet lacus. Proin at posuere dolor. Morbi at justo sit amet odio accumsan imperdiet. Morbi quis nibh ligula.&#8221;</p>
<p>Linda Colica<br />
The Tucson Equestrian Center, Tucson Arizona<</p>

                                            <a class="button" href="http://dev.lakinmilling.com/products/">View Our Products</a>

                </div>
            </div>


</div>

我做了一个JS小提琴来展示我遇到的问题： https://jsfiddle.net/5bk5sdt9/

请注意，当您向下滚动时，您会获得视差效果，但在到达内容之前，每个视差图像下面都会有一个大的白色间隙。

将“background-size：contains”更改为“background-size：cover”，问题解决了（但是图片不会按照我希望的方式包含自己）。

所以我的问题是，我在这里做错了什么？我很震惊，我在谷歌搜索中找不到任何关于这个主题的内容。

视差滚动效果与背景大小不兼容：包含

0 个答案: