主页 / 问题 / 1368223
Accepted
dbUser11
Asked:2022-06-04 01:07:31 +0000 UTC2022-06-04 01:07:31 +0000 UTC

为什么背景中有图像的div不滚动？

  • 772

我div在一个页面上，在一个<header>显示图像（背景）、两个标题和一个按钮的标签中。

<header>
      <div class="main-section">
        <h1 class="main-label main-color">Welcome To The Beach!</h1>
        <p class="secondary-font main-color">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero,
          inventore ipsum quis accusamus placeat veritatis.
        </p>
        <button class="btn main-color secondary-font">Read More!</button>
      </div>
 </header>

这个 div 绑定到 css 类.main-section，这里是它的内容：

.main-section {
    background-image: url("../img/beachshowcase.jpg");
    background-size: 100% 100%;
    /* background-size: cover; - не работает =((( */
    background-position: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    text-align: center;
}

一切都以我想要的方式显示。

但是，在标签中，<main>我想放置另一个<div>带有主要信息的标签。做过这个：

<main>
  <div>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
    blanditiis sed eveniet quae, dolores aliquam eius praesentium minima
    doloremque atque nobis animi velit nulla dolore? Impedit quo fugit
    voluptatum perferendis.
  </div>
</main>

问题出现在这一点上：我只是看不到<div>tag 中的哪个<main>。这就是我想要的，但我希望滚动条会出现滚动到主要信息 - 但事实并非如此。

如何解决这个问题？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main-section {
  background-image: url("../img/beachshowcase.jpg");
  background-size: 100% 100%;
  /* background-size: cover; - не работает =((( */
  background-position: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  text-align: center;
}

.main-color {
  --color: #926239;
  color: var(--color);
}

.main-label {
  font-size: 50px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 0.5%;
  margin-top: 17.5%;
}

.secondary-font {
  font-size: 20px;
}

.btn {
  margin-top: 1.5%;
  padding: 1%;
  width: 10%;
  max-width: 200px;
  border-radius: 10px;
  border-color: var(--color);
  border-width: 0.5px;
  text-align: center;
  background-color: transparent;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./assets/styles/styles.css" />
  <title>Freshcode - Main Page</title>
</head>

<body>
  <header>
    <div class="main-section">
      <h1 class="main-label main-color">Welcome To The Beach!</h1>
      <p class="secondary-font main-color">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, inventore ipsum quis accusamus placeat veritatis.
      </p>
      <button class="btn main-color secondary-font">Read More!</button>
    </div>
  </header>

  <main>
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi blanditiis sed eveniet quae, dolores aliquam eius praesentium minima doloremque atque nobis animi velit nulla dolore? Impedit quo fugit voluptatum perferendis.
    </div>
  </main>

  <footer></footer>
</body>

</html>

它在我的浏览器中的显示方式： 在此处输入图像描述

这是问题： <div>，我插入标签中-它不可见。显然，他在页面的最开头起床，我需要他在底部，如本网站所示。

html

1 个回答

  1. Best Answer

    稍微改变了你的代码。块的行为main是通过你.main-section所拥有的position:fixed;

    * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

header {
   background-image: url('http://traversymedia.com/downloads/assets/beachshowcase.jpg');
   background-size: 100% 100%;
   background-position: center;
   display: flex;
   width: 100%;
   height: 100vh;
   text-align: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

.main-color {
   --color: #926239;
color: var(--color);
}
.main-label {
  font-size: 50px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 0%;
  margin-top: 0%;
}
.secondary-font {
  font-size: 20px;
}
.btn {
   margin-top: 1.5%;
   padding: 1%;
   width: 100%;
   max-width: 200px;
   border-radius: 10px;
   border-color: var(--color);
   border-width: 0.5px;
   text-align: center;
   background-color: transparent;
}
    <header>
   <div class="main-section">
   <h1 class="main-label main-color">Welcome To The Beach!</h1>
   <p class="secondary-font main-color">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, inventore ipsum quis accusamus placeat veritatis.
   </p>
   <button class="btn main-color secondary-font">Read More!</button>
</div>
 </header>
 <main>
   <div>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi blanditiis sed eveniet quae, dolores aliquam eius praesentium minima doloremque atque nobis animi velit nulla dolore? Impedit quo fugit voluptatum perferendis.
 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi blanditiis sed eveniet quae, dolores aliquam eius praesentium minima doloremque atque nobis animi velit nulla dolore? Impedit quo fugit voluptatum perferendis.
 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi blanditiis sed eveniet quae, dolores aliquam eius praesentium minima doloremque atque nobis animi velit nulla dolore? Impedit quo fugit voluptatum perferendis.
   </div>
 </main>
<footer></footer>

    • 1

相关问题