Question

我有一个带有导航栏的背景图像，并在其顶部有一些内容。发生的情况是，bgimg div中的导航栏和相关内容在覆盖整个屏幕的背景图像上重复出现。

    <div class="bgimg">
      <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="d-flex flex-grow-1" style="margin-left: 5%">
          <span class="w-100 d-lg-none d-block"></span>
          <a class="navbar-brand" routerLink="/">Home</a>
          <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
                <span class="navbar-toggler-icon"></span>
            </button>
          </div>
        </div>
        <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7" style="margin-right: 5%">
            <ul class="navbar-nav ml-auto flex-nowrap">
              <li class="nav-item">
                <a routerLink="/software" class="nav-link">Software</a>
              </li>
              <li class="nav-item">
                <a routerLink="/about" class="nav-link">About</a>
              </li>
              <li class="nav-item">
                <a routerLink="/contact" class="nav-link">Contact</a>
              </li>
            </ul>
        </div>
      </nav>
      <div class="myName">
          <span>blah</span>
          <div class="description">
            <span>Developer</span>
          </div>
      </div>
    </div>

    .bgimg {
        background: url("/assets/images/DSC01250.jpg") no-repeat center center fixed;
        background-size: cover;
        opacity: 0.8;
    }

    .myName {
        font-family: 'Courier New', Courier, monospace;
        margin-top: 300px; //half page height
        color: white;
        font-size: 50px;
        text-align: center;
    }
    .description {
        font-size: 25px;
    }

我只想要一张覆盖屏幕的背景图像，上面没有重复的内容。

Answer 1

我最终增加了一个职位：固定；属性，并添加width和height属性以使所有div保持其父容器为真。

如何在背景图片上修复重复内容？

1 个答案: