html - 我将 Bootstrap 4 用于导航栏。我无法更改包装 div 元素的背景颜色

Question

我尝试过的一些事情: 背景颜色:透明； , RGBA(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，您会看到主体颜色被设置为黑色。因此，如果您保持透明，body .css 将应用并且颜色将为黑色。

如果你需要设置为背景透明(所以图像显示为背景)你需要将主体设置为透明:

正文{ 背景颜色:透明； }