叠加器推开侧导航

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

黑屏将我的正确导航向下推开，我使用了z索引，但这只能确保导航显示在顶部。边距和填充也在0上。我想要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>

更改您需要进行：

将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>

相关内容

最新更新

热门标签：