html - 汉堡 Menù BootStrap

Question

我有一个用于桌面 View 的导航栏和用于移动设备的汉堡菜单，我有一个关于汉堡菜单的问题；汉堡菜单的栏覆盖了部分背景图像，我希望背景图像始终位于汉堡菜单之后。这是我的代码

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="col-interno">  <--col interno is for color-->
      <!-- Logo -->
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a href="#" style="vertical-align:middle" class="navbar-left"><img src="css/logo.png" style="width:78px"></a>
          <a href="#" class="navbar-brand">Generic Brand</a>
      </div>

      <!-- Menu Items -->
      <div class="collapse navbar-collapse" id="mainNavBar">
          <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="chi-siamo.html">Who</a></li>
              <li><a href="servizi.html">Services</a></li>
              <li><a href="contatti.html">Contact Us</a></li>
          </ul>
      </div>

    </div>
     <div id="testata-back">
     </div>
      </nav>
       <div class="testata-500-1 testata-servizi"> 
        <div class="testata-500-logo-transparent">
<!-- Those classes are two image that i want on the bottom of the hamburger menu-->

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

[ 1

CSS

 testata-500-1{margin:0 auto;height:500px;box-shadow:inset 0 -2px 3px 1px rgba(0,0,0,.4)}

div 的 CSS

@media only screen and (min-width:1024px){.testata,.contents,#footer-bar,#credits-bar{width:960px}#hamburger{display:none}}@media only screen and (min-width:768px) and (max-width:1023px){.testata,.contents,#footer-bar,#credits-bar{width:740px}#logo{position:absolute;left:26px;top:65px;z-index:2000;width:150px;height:124px}.testata-500-1{height:250px;background-size:130%}.testata-500-logo-transparent{height:250px;background-size:155%}#testata-menu{top:10px}#hamburger{display:none}}

Answer 1

您可以使用 background-position: X Y 将背景图像定位到背景图像 CSS。将 X 的值保持为 0。并将 y 轴调整到您想要的高度。必要时使用媒体屏幕。