Question

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

这就是我想要完成的事情。

如果你仔细观察这个黑色导航的顶部，就会有一个透明的画笔效果，它是由黑色笔触PNG完成的。我坐在它自己的div里面。我要做的就是在默认的黑色引导程序导航栏上修复此div。

为了做到这一点，我使用相对于环绕导航栏的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。

无法将图像修复到引导程序导航栏的顶部

1 个答案: