Jquery 如何在固定的响应引导映像上定位映像

因此，我正在构建一个简单的引导站点（到目前为止排名第一）：

我试图在顶部背景图像中获得这种效果：

如您所见，第二幅图像在导航顶部有一个略微透明的png图像。我怎样才能使这样的东西得到修复和响应？我在绝对定位等方面有问题。谢谢你的建议

编辑：我甚至还没有在css中得到第二张图像，那只是在Photoshop中进行编辑

相关HTML

<!-- Top Background image above Nav -->

<div class="container-fluid parallax-1" id="Title">
    <div class="container-fluid parallax-inner">

        <div class="row">
            <div class="col-sm-12 col-lg-12 text-center">
                <h1 class="fade1"> Italian Joe's </h1>
            </div>

          </div>
        </div>
    </div>
</div>


  <!-- End Title Parallax -->

  <!-- Start Navbar -->

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <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>

  <!-- End Navbar -->

所有代码

---

如果希望导航栏固定在顶部，请使用引导导航栏。我不太明白你说的图像的透明度到底是什么意思。如果要将其删除，请使用以下方法：

opacity: 1;

---

为什么在另一个

容器液体中有
容器液体
？它们不应该嵌套。“由于填充和其他原因，两个容器都不可嵌套。”感谢您的洞察力，我有一个引导导航栏，但我所说的是我在第二个图像上绘制的连接到导航栏的图像，如果仔细看，第二个图像上有一个笔刷笔划图像与导航栏合并，但是我不知道如何在导航栏上放置它，而不会遇到一些问题。不管怎样，我认为编辑背景图像会更明智，换一种方式可能会有不必要的困难
opacity: 1;