Не могу указать цвет фона в заголовке

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;в мой заголовок Фон должен быть размещен за навигацией и логотипом.

Я пытался поместить его в один div .header-bg, но он все еще не работает так, как я хочуработа.

Answer 1

Иногда определения стиля могут перекрывать другие. Попробуйте использовать! Важное в конце описания цвета фона.

Answer 2

Происходит несколько вещей.

веб-инструменты для браузера

Все они могут быть продлены и протестированы в режиме реального времени с помощью щелчка правой кнопкой мыши -> проверить элемент или открыть инструменты веб-разработки,Если вы делаете что-то с веб-разработкой, они безумно полезны. Узнайте, как их использовать.

Неправильный CSS

& не является допустимым оператором в CSS. Если вы используете препроцессор, такой как LESS, вам нужно запустить его для вывода CSS, который может понять браузер.

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

Какой CSS-селектор вы хотите?

Если вы хотите выбрать все <header> элементы, вы бы использовали

header {
    background-color: red;
}

Если вы хотите, чтобы кто-то сclass name header use:

.header {
    background-color: red;   
}

Если вы хотите только один конкретный элемент с идентификатором header, используйте:

#header {
    background-color: red;   
}

Если вам нужен любой div, который является дочерним для заголовка:

header div {
    background-color: red;   
}

Найдите «css tutorials» и слово «селекторы» для получения дополнительной информации.

css overwriting?

Иногда определения стилей могут накладываться друг на друга

Это не тот случай переопределения на этот раз. Проверьте свою веб-страницу с помощью инспектора DOM браузера / веб-инструментов. Фон header устанавливается, если вы используете селектор header. Выберите нужный элемент, чтобы увидеть все его вычисленные свойства CSS.

Есть прозрачные элементы div, которые усложняют процесс определения. Установите все элементы на сплошной цвет фона, чтобы увидеть. Возможно, вам понадобится добавить padding или margin, чтобы увидеть их. В противном случае header div охватывает ваш header.

Упомянутый выше встроенный CSS

Вам не нужен встроенный CSS, например:

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

Это увеличитразмер файла и усложняет управление кодом. Это намного больше работы, чтобы внести какие-либо изменения. Вместо этого используйте правильные комбинации селекторов. Вы можете использовать иерархию (например, первый элемент <p> внутри <header>), либо по классам, либо по идентификаторам. Вы можете использовать несколько классов CSS на одном элементе. (Я не могу сказать по разметке, что вы ожидаете. Возможно, вы слишком усложняете макет.

Answer 3

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

Вы должны попробовать что-то вроде этого