Question

我对HTML＆amp; amp; CSS。我正在为学校做点什么，我想知道如何用全屏背景图像制作页面。我成功了一页，但不知道如何继续。我想知道如何在其下放置另一张全屏图像。另外，如何滚动页面到页面？不确定这是否是一个非常愚蠢的问题，但感谢帮助我！ PS：只有CSS才有可能，实际上并没有看到JS。不确定代码是否正在运行，它没有向我显示图片，可能是错误的链接！

＆＃13;

html{
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

*, *:before, *:after{
  box-sizing: inherit;
	margin: 0;
  padding: 0;
}

body{
  background-image: url(https://imgur.com/a/FZ3zD);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
  display: block;
}

.container{
  width: 96rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  height: 100%;
}

.mainpage{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Timmana', sans-serif;
  margin-bottom: 20rem;
}

.mainpage > h1{
 color: white;
 font-size: 10rem;
 font-family: 'Playfair Display', serif;
}

.mainpage > q{
 color: white;
 font-family: 'Old Standard TT', serif;
 font-size: 3rem;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./assets/img/style.css">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="mainpage">
        <h1>tentacion</h1>
        <q>Get lost here</q>
      </div>
    </div>


  </body>
</html>

＆＃13;

如何使用图像背景制作多个完整页面并将页面滚动到页面

0 个答案: