html - 无法在标题上指定背景颜色

Question

我似乎无法在我的网站的标题上指定颜色。

代码在这里:

.header {
  height: 95vh;
  background-size: cover;
  background-position: top;
  position: relative;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 4;
  }

  &__logo {
    height: 35px;
    transform: scale(1.5);
    z-index: 4;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
  }
}



.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover;
}

.gradient {
  background: linear-gradient(
    90deg,
    rgba(30, 95, 156, 1) 1%,
    rgba(16, 55, 130, 0.2637429971988795) 100%
  );

  z-index: 2;
  min-width: 100%;
  min-height: 100%;
  height: calc(100vh - 80px);
  object-fit: cover;
  position: relative;
}




.hor-nav{
  position: fixed;
	top: 40px;
	right: 40px;
	height: 50px;
  z-index: 20;
  color: $color-white;
  
}

ul{
  list-style-type: none;
  
  color:$color-white;
}
li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.header-bg{
  background-color:#2998ff;
}

 <header class="header">
      <div class="gradient">
      </div>
      <video autoplay muted loop class="video">
        <source src="img/bg-video.mp4" type="video/mp4" />
      </video>
      <div class="header-bg">
      <div class="header__logo-box">
        <a href="#"><img src="http://logos.xmltv.se/en.tlc.discovery.dk.png" alt="logo" class="header__logo" /></a>
      </div>
      <div class="hor-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a> </li>
          <li><a href="#">Invest</a></li>
          <li><a href="#">Insights</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Performance</a></li>
          <li><a href="#">Education</a></li>
        </ul>
        </div></div>
        </header>

我想放#2998ff的背景色； to my header 背景需要放在导航和logo后面。

我试过将它放在一个 div .header-bg 中，但它似乎仍然无法按照我希望的方式工作。

Answer 1

    <div style="background-color:#2998ff;"></div>

你应该试试这样的东西