如何在Bootstrap侧边栏导航中在背景图像的顶部覆盖？

Question

我正在尝试使用背景图片上方的叠加层创建移动响应式侧边栏导航，例如以下示例：

[背景图像类（.sn-bg-4）位于侧栏中的顶层div，而覆盖类（.mask-strong）则位于底部：https://mdbootstrap.com/snippets/jquery/mdbootstrap/98644?action=fullscreen

另一个例子：https://demos.creative-tim.com/material-dashboard-dark/examples/dashboard.html?_ga=2.27029245.1708284444.1589338060-820309373.1588842756

我试图移动CSS类。bg-poverlay和.sidebar-bgimg，但是我似乎无法获得我想要的设计风格。我想念什么？

这里是一个CodePen，您可以分叉并编辑：https://codepen.io/Aleeweb/pen/eYpLBWg

请参见下面的代码，并在“整页”视图中运行代码段。

body {
  overflow-x: hidden;
}

.bg-poverlay,
.bg-poverlay:after {
  background-color: rgba(71, 47, 146, 0.5);
}

.sidebar-bgimg {
  background-image: url("https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg");
}

#sidebar-wrapper {
  width: 260px;
  min-height: 100vh;
  margin-left: -8rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }
  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }
  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  #menu-toggle {
    display: none;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex" id="wrapper">
  <!-- Sidebar -->
  <div class="sidebar-bgimg" id="sidebar-wrapper">
    <div class="sidebar-heading">Bootstrap Nav</div>
    <div class="text-center">
      <a href="#" class="text-white">Link</a>
    </div>
    <!--End of wrapper div-->
    <div class="bg-poverlay"></div>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">

    <!--Mobile toggle button-->
    <button class="btn btn-primary" id="menu-toggle" style="
    margin: 10px;
"><i class="fas fa-bars"></i></span></button>
    <!--Mobile toggle button-->

    <div class="container-fluid">
      <h1 class="mt-4">Headline</h1>
      <p>Lorem ipsum solor dolor.</p>
    </div>
  </div>
  <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

请发送CSS代码解决方案。感谢您的帮助！

Answer 1

尝试一下：

 <div class="bg-poverlay">
    <div class="sidebar-bgimg" id="sidebar-wrapper">
        <div class="sidebar-heading">Bootstrap Nav</div>
        <div class="text-center">
          <a href="#" class="text-white">Link</a>
        </div>
    </div>
</div>   

css：

.bg-poverlay {
        position: absolute;            
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2;
        cursor: pointer;//Optional
    }

随时尝试，根据需要进行编辑。