CSS 向下滚动到新背景图片时出现间距问题和延迟

Question

我目前正在使用 CSS background-attachment 属性构建主页以创建滚动背景效果。

我有多个背景，每个背景之间都有一个内容部分。在第一个内容部分之后，在下一个背景图像之前有一个长长的白色小 space，我不确定如何摆脱那个 space。

我遇到的另一个问题是页面的实际性能。

当我滚动到新图像时，在实际显示图像之前会有大约一到两秒的延迟。换句话说，当尝试滚动到新的 background.

时，屏幕实际上会冻结几秒钟

我认为这根本不重要，但我将其构建为 ASP.NET MVC 网络应用程序。

这是我的HTML：

<body>   
        <main class="cd-main-content">
            <div class="cd-fixed-bg cd-bg-1">
                <div class="cd-intro">

                </div>
            </div> <!-- cd-fixed-bg -->

            <div class="cd-scrolling-bg cd-color-2">            
                <div class="cd-container">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing  elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur 
                    </p>
                </div> <!-- cd-container -->
            </div> <!-- cd-scrolling-bg -->

            <div class="cd-fixed-bg cd-bg-2">
                <h2>Lorem ipsum dolor sit amet.</h2>
            </div> <!-- cd-fixed-bg -->

            <div class="cd-scrolling-bg cd-color-3">
                <div class="cd-container">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente 

                    </p>
                </div> <!-- cd-container -->
            </div> <!-- cd-scrolling-bg -->

            <div class="cd-fixed-bg cd-bg-3">
                <div class="cd-container">
                    <p>


                    </p>
                </div>
            </div> <!-- cd-fixed-bg -->


        </main> <!-- cd-main-content -->

    </body>

这是我的 CSS:

    body, html, main {
    /* important */
    height: 100%;
}

.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url('../Images/portfolio1.jpg');
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url('../Images/portfolio2.jpg');
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url('../Images/portfolio3.jpg');
}
.cd-scrolling-bg {
    position:relative;
    min-height: 70%;
    padding: 4em 0;
    line-height: 2.7;
    z-index: 2;
    top: 0%;
    bottom: 0%;
    left: 0%;
}
.cd-intro {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: inherit;
    z-index: 100;
    text-align:center;
    height: 400px;
    margin-top: -200px;
    color: white;
    width: 600px;
    margin-left: -300px;
    font-size: 45px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.cd-container
{
    width: 90%;
    max-width: 768px;
    margin: 0px auto;
}
.cd-scrolling-bg.cd-color-3 {
    background-color: #b4d7a8;
    color: #3d3536;
}
.cd-scrolling-bg.cd-color-2 {
    background-color: #b4d7a8;
    color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
    background-color: #b4d7a8;
    color: #3d3536;
}

Answer 1

white-space 由 p 和 h2 创建。

在 HTML 中，段落和标题默认具有 margin，因此请重置全部或仅重置您需要的那个。

由于创建水平滚动条，我从你的第一个 cd-intro 中删除了 left:50%。

*,
*::before,
*::after {
  box-sizing: border-box
}
body,
html,
main {
  /* important */
  height: 100%;
  margin: 0
}
.cd-fixed-bg {
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url('//lorempixel.com/900/900/sports');
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url('//lorempixel.com/900/900/animals');
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url('//lorempixel.com/900/900/city');
}
.cd-scrolling-bg {
  position: relative;
  min-height: 70%;
  padding: 4em 0;
  line-height: 2.7;
  z-index: 2;
  top: 0%;
  bottom: 0%;
  left: 0%;
}
.cd-intro {
  position: absolute;
  top: 50%;
  background-color: inherit;
  z-index: 100;
  text-align: center;
  height: 400px;
  color: white;
  width: 600px;
  font-size: 45px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 0px auto;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #b4d7a8;
  color: #3d3536;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #b4d7a8;
  color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #b4d7a8;
  color: #3d3536;
}
h2, p {
  margin: 0
}

<main class="cd-main-content">
  <div class="cd-fixed-bg cd-bg-1">
    <div class="cd-intro">
      some text
    </div>
  </div>
  <!-- cd-fixed-bg -->

  <div class="cd-scrolling-bg cd-color-2">
    <div class="cd-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur
      </p>
    </div>
    <!-- cd-container -->
  </div>
  <!-- cd-scrolling-bg -->

  <div class="cd-fixed-bg cd-bg-2">
    <h2>Lorem ipsum dolor sit amet.</h2>
  </div>
  <!-- cd-fixed-bg -->

  <div class="cd-scrolling-bg cd-color-3">
    <div class="cd-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente

      </p>
    </div>
    <!-- cd-container -->
  </div>
  <!-- cd-scrolling-bg -->

  <div class="cd-fixed-bg cd-bg-3">
    <div class="cd-container">
      <p>


      </p>
    </div>
  </div>
  <!-- cd-fixed-bg -->


</main>
<!-- cd-main-content -->

CSS 向下滚动到新背景图片时出现间距问题和延迟

CSS Spacing Issue and Lag When Scrolling Down Into New Background Images

html

css

background-image

parallax