jquery - 无法将图像固定到 Bootstrap 导航栏的顶部

Question

好吧，所以我在这里遇到了一些绝对定位问题。

这就是我想要完成的。

如果你仔细观察这个黑色导航的顶部，你会发现一个透明的画笔效果，它是由 PNG 黑色画笔描边完成的。我位于它自己的 div 中。我想要做的就是将这个 div 修复在默认的黑色 Bootstrap 导航栏之上。

为了做到这一点，我使用了相对于环绕导航栏的 div 的绝对定位(它是相对于它的)

，但我遇到了奇怪的问题，例如隐藏的溢出不起作用。有人可以看看我的代码并告诉我我做错了什么吗？谢谢。

HTML

  <nav class="navbar navbar-inverse">



    <div class="container-fluid">


      <div class="navbar-header">

      <!-- BrushStroke PNG Shit -->


      <div class="img-wrap">
        <img class="image-responsive black-brush" src="img/blackbrushnew.png">
      </div>


    <!-- BrushStroke PNG Shit -->

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Italian Joe's</a>
        <p class="navbar-text text-center" id="NavHours" style="color:white; width: 230px;"> Open 6am to 5pm </p>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li id="Home" class="active"><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">About</a></li>
          <li id="location"><a href="#">Location</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

  <!-- End Navbar -->

CSS

.blackbrush{
            position: absolute;
            top: -135%;
            text-align: center;
            margin: 0 -1000px;
            z-index: 100;
            mix-blend-mode: multiply;
                }
.img-wrap {
  overflow: hidden;
}

Answer 1

将一个类添加到您的navbar-header div。说一些xyz类 然后像下面这样添加你的背景图片

 .xyz
 {
  background-image:url('img/blackbrushnew.png');
 }

用 img-wrap 类删除你的 div。