Я использовал Bootstrap 4 для панели навигации.Я не могу изменить цвет фона элемента div для упаковки

Question

Несколько вещей, которые я пробовал: background-color: прозрачный;, ргба (0,0,0,0);, фон: нет;

Однако, когда я пытаюсь background-color: red или любой другой цвет, он соответственно меняет цвет.

Вот мой HTML-код:

`<div class="navbar  navbar-expand-md">
  <h1 class="navbar-brand">sivarajbiz</h1>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a> </li>
    <li class="nav-item"><a href="#" class="nav-link">What you want</a> </li>
    <li class="nav-item"><a href="#" class="nav-link">What I know</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Let's chat</a> </li>
  </ul>
</div>`

Вот мой CSS:

:root{
  --primary-theme-color: #0077B5 /*LinkedInBlue*/;
  --buttons-color: #0077B5 /*LinkedInBlue*/;
  --primary-bg-color: black;
  --primary-font-color: white;
  --img-text-bg-color: rgb(0,0,0,0.2);
  --img-text-font-size-mobile: 0.8em;
  --img-text-box-width: 20em;
  --img-text-box-width-mobile: 15em;
}

body{
  font-family: "times new roman",serif;
  color: var(--primary-font-color);
  background-color: var(--primary-bg-color);
}

.carousel-inner .carousel-item {
  height: 100vh;
}

.carousel-caption{
  transform: translate(-5vw,-30vh);
  background-color: var(--img-text-bg-color);
  width: var(--img-text-box-width);
  height: var(--img-text-box-width);
  text-align: left;
  padding-left: 2%;
}

Как показано на рисунке, панель навигации по умолчанию имеет черный цвет.Я хотел бы изменить его на прозрачный.

Answer 1

Если я правильно понял ...

Если вы обратите внимание на свой CSS, вы увидите, что цвет тела устанавливается на черный. Таким образом, если вы оставите прозрачным, применяется тело .css, и цвет будет черным.

Если вам нужно установить прозрачный фон (чтобы изображение отображалось как фон), вам нужно установить тело прозрачным:

body{ background-color: transparent; }

Answer 2

Чтобы удалить цвет фона, вам нужно удалить background-color: var(--primary-bg-color); этот css из вашего стиля тела. Оформить заказ

Answer 3

переместив фоновое изображение на top: 0; и добавив z-index z-index:10; к элементу navbar, добились цели. Наконец, панель навигации показывает часть изображения позади него в качестве фона.

Answer 4

Как насчет использования слова css !important?

Как это: background-color:rgba(255,0,0,1) !important;