在具有 z-index 和叠加层的背景图像不影响导航栏的情况下创建边距

Question

我正在尝试创建一个网页，其中我有固定的 50px 边距，其中页面图像有一个索引，使其更靠近屏幕并且边距看起来更远 off.I 也想要为了实现固定的页脚，就像我在导航中所做的那样 bar.I 尝试将左右边距设置为 50px 并将它们设置为固定位置并尝试使用包装器 class 添加到两个部分都没有产生期望的结果。

下面是我的代码

HTML 代码：

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Archers</title>
  <link rel="stylesheet" href="arch.css">
</head>

<body>



    <section id="main">
        <div class="bg1">
          <header>
            <div id="navbar">
              <nav class="nav-list">
                <ul class="ul-style ">
                  <li><a href="#portfolio">OUR PORTFOLIO</a></li>
                  <li><a href="#process">OUR PROCESS</a></li>
                  <li><a href="#about">ABOUT</a></li>
                  <li><a href="#main">HOME</a></li>
                </ul>
            </div>
          </header>
        </div>
        </div>
      </section>

      <section id="about">
        <div class="bg1">
          <div class="about_us">
            <a name="#about">
              <p>
                <h1>ABOUT US</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
                quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
                itaque
                minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
                rem.
                Sit, illum, non.
              </p>
            </a>
          </div>
        </div>
        </div>
      </section>

      <section id="process">
        <div class="bg1>
          <div class=" our_process">
          <a name="#process">
            <p>
              <h1>OUR PROCESS</h1>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
              quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
              itaque
              minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
              rem.
              Sit, illum, non.
            </p>
          </a>
        </div>
        </div>
        </div>
      </section>

      <section id="portfolio">
        <div class="bg1">
          <div class="our_portfolio">
            <a name="#portfolio">
              <p>
                <h1>OUR PORTFOLIO</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
                quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
                itaque
                minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
                rem.
                Sit, illum, non.
              </p>
            </a>
          </div>
        </div>
        </div>
      </section>
      </section>
      <section id="footer">
        <footer>
          2020 DeborahPalmTree
        </footer>
      </section>
      <script src="index.js" charset="utf-8"></script>

    </body>

</html>

CSS 代码

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
}


#navbar {
  width: 100%;
  height: 50px;
  background-color: rgba(219, 219, 219, 1.0);
  position: fixed;
}

nav ul li {
  list-style: none;
  float: right;
  margin: 20px;
}

li a {
  text-decoration: none;
  color: #ffffff;
}

.bg1 {
  background-color:rgba(255,255,255, 0.5);
  width:100%;
  height:100%;
}

/*.wrapper{
  width:50px;
    position:fixed;
    height:100%;
    background-color:rgba(255,255,255,1.0);
    opacity:0;
    z-index:1;}
}*/

#main {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_house_trees.jpg');
  background-size: cover;
  background-position: bottom;
}

#about {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_construction_site.jpg');
  background-size: cover;
  background-position: bottom;
}

#process {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_arc_plan.jpg');
  background-size: cover;
  background-position: bottom;
}

#portfolio {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img-structure-garden-car-park.jpg');
  background-size: cover;
  background-position: bottom;
}

 #fixed{
   position: fixed;
   height :50px;
   width:100%;
   background-color: rgba(219,219,219,1.0);
 }

Answer 1

您没有使用 id 选择器来引用 css 页面中的页脚部分，可能您在 CSS 文件的底部引用了 #fixed 而不是页脚。

// 用这个代替

 #footer{
 position: fixed;
 bottom: 0;
 left: 0;
 height :50px;
 width:100%;
 background-color: transparent;

}

您在菜单导航、部分和子 divs (#portfiolio) 上使用了相同的选择器，您需要学习如何正确创建布局并正确使用 css 选择器。你可以免费学习 udemy 网页设计入门。他们的解释非常好，还有 Kenvin Powell 在 Youtube 上介绍 css 课程。

快速修复得到一个 parent div 和 2 children

<div class="parentDiv">
   <div class="bgDiv"></div>
   <div class="contentDiv></div>
</div>

假设当前屏幕尺寸为 746 像素，您可以使用这些单位来获得所需的输出

.parentDiv{
   width: 646px;
   max-width: 100%;
      position: relative;
   max-width: 100%;
   margin: auto;
   perspective: 500px;
   height: 100%;

 }
.bgDiv{
      box-shadow: inset -3px -70px 8px 6vw rgba(255, 255, 255, 0.8);
   background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255, 
    255, 255, 0.5)), url(https://placebear.com/500/300);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: -999;
    background-size: cover;

}
 .contentDiv{
  position: absolute;
  z-index: 999;
  top: 20px;
  left: 50px;
  transform: translate3d(25px, 25px, 50px);
  padding: 4rem;

}

在具有 z-index 和叠加层的背景图像不影响导航栏的情况下创建边距

Creating a margin while background image having z-index and overlay not affecting the navbar

html

css

navbar

margin

footer