html - 修复了在移动设备上滚动时导航栏被遮盖的问题

Question

因此，当我在查看我的网站时在任何移动设备上滚动时，具有重复图像的固定导航栏会被背景颜色覆盖。它不会每次都发生，但是如果您在滚动时按住它会发生。

我玩过 z-index 和 top 属性，但仍然没有骰子。

 nav.repeat{
      background-image: url(imgs/classiccardback.png);
      background-repeat: repeat-x;
      margin: 0;
      opacity: 50%;
      width: 100%;
      margin-left: 0px;
      top: 0;
      z-index: 1;
    }

    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      margin-right: 2px;
      padding: 0px;
      background-color: #e9ecef;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

/*I believe this is the only css that would be needed to recreate this other than bootstrap min css file*/

    <nav style="z-index: 10;top: 0px; background-color: transparent;height: 
     59px;" class="repeat navbar navbar-expand-md navbar-light fixed-top">
        <a style="text-decoration: none;padding: 0px;width: 300px;height: 
     61px;margin-left: -7px;" class="logoMargin rounded bg-dark" href="#">
            <img src="imgs/heraldLogo2.png" width="300" height="60" class="d- 
     inline-block" alt="logo">
        </a>
        <button style="margin-top: -10px;" class="bg-white navbar-toggler" 
     type="button" data-toggle="collapse" data- 
     target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
     aria-expanded="false" aria-label="Toggle navigation">
          <span class="bg-white navbar-toggler-icon"></span>
        </button>
    
        <div class="rounded collapse navbar-collapse w-25" 
    id="navbarSupportedContent">
          <ul style="font-weight: bolder;" class="bigHeight smallHeight bg- 
     dark navbar-nav rounded ml-auto">
            <li class="nav-item active">
              <a style="margin-top: 5px;color: white;" class="nav-link" 
     href="#">Home <span class="sr-only"></span></a>
            </li>
            <li class="nav-item">
              <a style="margin-top: 5px;color: white;" class="nav-link" 
     href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a style="margin-top: 5px;color: white;" class="nav-link 
     dropdown-toggle" href="#" id="navbarDropdown" role="button" data- 
     toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="bg-dark dropdown-menu dropdown-menu-right" aria- 
     labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

标签： htmlcss