Question

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

黑屏正在向右推导我的右侧导航，我使用z-index，但这只是确保导航显示在顶部。边距和填充也在0.我希望黑色屏幕具有50％的不透明度但是它也不起作用。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以简单地使用具有绝对位置的伪元素，而不是添加额外的元素，然后调整元素的z-index

＆＃13;

#section1:before {
  content:"";
  position:absolute;
  background-color: rgba(0,0,0,0.5);
  left:0;
  right:0;
  top:0;
  bottom:0;
}

#section1 {
  position:relative;
  background-image: url("https://lorempixel.com/400/400/");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}


/* Dot navigation */

.dotstyle-scaleup {
  float: right;
  margin-right: 3%;
  position:relative;
  z-index:9;
}

.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;
}

＆＃13;

<div id="wrapper">
    <!-- Landings -->
    <div class="section" id="section1" data-anchor="page1">
      <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>

＆＃13;

Answer 2

您需要做出的更改：

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

覆盖层推开侧面导航

2 个答案: