时间戳

首页 > 解决方案 > 在 HTML 中跳过整页的最佳方法是什么？

html - 在 HTML 中跳过整页的最佳方法是什么？

问题描述

我使用图像作为全屏背景。当我在 div 的内容下面放置一个新的 div 时，它会与图像混在一起，而不是允许滚动。

html {
  scroll-behavior: smooth;
  ;
}

body {
  background-color: #FBEEC1;
  margin: 0;
  padding: 0;
  text-align: center;
}

#header {
  background-image: url(tempbackground.jpg);
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}

#title-text {
  position: absolute;
  width: 500px;
  height: 250px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  /* divide each margin in 1/2 */
  margin-top: -125px;
}

​ .body-text {
  display: none;
  /*This will be enables after scrolling with a scroll animation */
  color: #BC986A;
  width: 100%;
}

.text-width {
  margin: 0 auto;
  width: 50%;
}

.font-title {
  font-family: "Times New Roman", Times, serif;
}

.font-body {
  font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
  <img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">&nbsp;
  <h2 class="text-width">Our Forests Are Under Attack!</h2>
  <p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>

标签： htmlcss

解决方案

据我了解，您希望在浏览器中打开文件后首先看到的页面是空白的，并且当您向下滚动时会看到您的内容。为此制作一个空容器 <div class="empty-page"></div> 并将其在 css 文件中的高度设置为100 vh（视口高度）。

.empty-page { 
      height: 100vh;
    }
<body>
    <div class="empty-page"></div>
    <!-- your rest of the code -->
    <h1>THIS IS A HEADING</h1>   
</body>

推荐阅读