jquery - 如何将图像定位在固定的响应式 Bootstrap 图像上

Question

所以我正在构建一个简单的 Bootstrap 站点(到目前为止的顶部):

我正试图在顶部背景图片中获得这种效果:

如您所见，第二张图片在导航顶部放置了一个略微透明的 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 -->

相关 CSS

/* --- Navbar --- */

.fade1{

    font-family: 'Jim Nightshade', cursive;
    font-size: 8.9em;
    font-style: italic;
}

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
    background-color:black;
}

.nav.navbar-nav.navbar-right li a {
    color: white;
}


.navbar-inverse .navbar-brand {
    color: white;
}

/* Hover */

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    background-color: black;
}


/*-- Stubborn Home Element -- */

.navbar.navbar-inverse .navbar-nav>li {
      border-bottom: solid 1px;
      border-color: white;
      text-align: center;
    }

#Home {
       border-top: solid 1px;
      border-color: white;
      text-align: center;

}



.navbar .navbar-collapse {
  text-align: center;
  padding: 0px;
}

/* --- End Navbar --- */


/* --- Title Parallax --- */

#Title {
    padding-top: 5%;
    color:white;
}

/* --- End Title Parallax --- */

/*----Start Parallax Sections----*/


.parallax-1 {
    background: url("../img/pizzatitle.jpg") fixed 100%;
    background-size: cover;
    background-repeat: no-repeat;
   }

.black_brush {
    top: 40%;
    width: 100%;
    height: 200px;
    background: url("../img/blackbrush.jpg");
    position: relative;
    z-index: 1;
}


.row {

    margin: 0px;
}

.parallax-inner {
    padding-bottom: 5%;

}

.clearfix{

    clear: both;

}

.parallax-inner h3, .parallax-inner p {
    color: #F1F1F1;

}

/*----End Parallax Sections----*/

所有代码

https://codepen.io/Sovember/pen/OpwXKe

Answer 1

如果你想让它固定在顶部，可以使用bootstrap navigation bar。我不明白你所说的图像透明度到底是什么意思。如果你想删除它，那么使用这个:

opacity: 1;