Overlayer 推侧边导航

Question

所以我正在创建一个单页网站，旁边有一个点导航。我在第一部分有一张图片作为背景，因为该网站存在 5 个部分，您可以在其中向下滚动。

黑屏将我的右侧导航向下推，我使用了 z-index 但这只是确保导航显示在顶部。边距和填充也为 0。我想要 50% 不透明度的黑屏，但这也不起作用。

我需要的是在我的背景图片之上有一个 50% 不透明度的黑屏，覆盖整个部分而不推开其他元素。

.back{
 background-color: black;
 opacity: 50%;
 width: 100%;
 height: 110%;
 margin: 0;
 padding: 0;
 display: block;
 position: sticky;
 z-index: -1;
 background-size: cover;
}

#section1{
 background-image: url("../Content website/background.png"); 
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 50;
}

/* Dot navigation */

.dotstyle-scaleup{
 float: right;
 margin-right: 3%;
}

.dotstyle-scaleup li{
 background-color: #eeeeee;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 margin: 80px 0 0 0;
 list-style: none;
}

.dotstyle-scaleup .current1{
 background-color: #54a59f;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 margin: 80px 0 0 0;
 list-style: none;
 margin-left: -2.5px;
}

.dotstyle-scaleup li a {
  width: 100%;
  height: 100%;
  display: block;
}

<html lang="en">
      <body>

     

        <div id="wrapper">
            <!-- Landings -->
            <div class="section" id="section1" data-anchor="page1">
              <div class="back"></div>
              <div class="dotstyle-scaleup">
                <ul>
                  <li class="current1"><a href="#page1"></a></li>
                  <li><a href="#page2"></a></li>
                  <li><a href="#page3"></a></li>
                  <li><a href="#page4"></a></li>
                  <li><a href="#page5"></a></li>
                </ul>
              </div>
            </div>

</body>
</html>

Answer 1

您需要进行的更改：

将 position:relative 添加到您的分区容器。
使用 position:fixed 将您的背部固定在您的部分中，并使用 top,left,bottom,right as 0 使其伸展到您部分的整个长度。

.back {
  background-color: black;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
  position: fixed;
}

#section1 {
  position:relative;
  background-image: url("../Content website/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 50;
}


/* Dot navigation */

.dotstyle-scaleup {
  float: right;
  margin-right: 3%;
}

.dotstyle-scaleup li {
  background-color: #eeeeee;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin: 80px 0 0 0;
  list-style: none;
}

.dotstyle-scaleup .current1 {
  background-color: #54a59f;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 80px 0 0 0;
  list-style: none;
  margin-left: -2.5px;
}

.dotstyle-scaleup li a {
  width: 100%;
  height: 100%;
  display: block;
}

<div id="wrapper">
  <!-- Landings -->
  <div class="section" id="section1" data-anchor="page1">
    <div class="back"></div>
    <div class="dotstyle-scaleup">
      <ul>
        <li class="current1">
          <a href="#page1"></a>
        </li>
        <li>
          <a href="#page2"></a>
        </li>
        <li>
          <a href="#page3"></a>
        </li>
        <li>
          <a href="#page4"></a>
        </li>
        <li>
          <a href="#page5"></a>
        </li>
      </ul>
    </div>
  </div>

Overlayer 推侧边导航

Overlayer pushing away side navigation

html

css

screen

overlay