css - 无法更改导航栏的当前背景图像

问题描述

我目前正在开发一个使用角度框架的项目。我想实现这样的类似设计。像这个

所以这是我的导航栏组件代码：

<div *ngIf="!isMobile">
  <nav *ngIf="nav.visible">
    <div class="d-flex justify-content-around align-items-center flex-wrap my-2">
      <div class="p-2">
        <img src="https://i.imgur.com/2diJpU5.png" width="50px" />
      </div>
    </div>
    <nav class="navbar navbar-expand-md">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
        </li>
        <li class="nav-item">
          <a routerLink="/shop" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Shop All</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" id="dropdown" data-toggle="dropdown">
            Accessories
          </a>
          <div class="dropdown-menu shadow-sm">
            <a class="dropdown-item" routerLink="/shop/category/Necklaces">Necklaces</a>
            <a class="dropdown-item" routerLink="/shop/category/Bracelets-Anklets">Bracelets and Anklets</a>
            <a class="dropdown-item" routerLink="/shop/category/Earrings">Earrings</a>
            <a class="dropdown-item" routerLink="/shop/category/Rings">Rings</a>
          </div>
        </li>
        <li class="nav-item">
          <a routerLink="/about-us" routerLinkActive="active">About Us</a>
        </li>
      </ul>
      <div>
        <a>
          <button class="btn-2 mr-2" routerLink="/cart">
            <svg xmlns="http://www.w3.org/1200/svg" width="16" height="16" fill="currentColor" class="bi bi-bag"
              viewBox="0 0 16 16">
              <path
                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
            </svg>
          </button>
        </a>
      </div>
    </nav>
  </nav>
</div>

以及导航栏的css组件：

.dropdown-menu::before {
  display: block;
  content: "";
  width: 100%;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.navbar {
  padding: 1vh 0;
  transition: 0.1s all ease-in;
  border: none;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
}

.navbar a {
  font-size: 13px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin: 0 2vw;
}

.navbar a:hover {
  color: rgb(221, 221, 221);
}

.active {
  color: rgb(221, 221, 221) !important;
}

.navbar-toggler {
  color: #ffffff;
}

.btn-2 {
  background-color: transparent;
  border-color: transparent;
}

.dropdown {
  position: static;
  transition: 1s all ease-in-out;
}

.dropdown-menu {
  transition: 1s all ease-in-out;
  display: none;
  text-align: center;
  border: 0;
  border-radius: 0;
  width: 100%;
  margin-top: 0;
}

.dropdown:hover>.dropdown-menu {
  display: block;
  padding: 25px 300px;
  height: auto;
  width: 100%;
  position: absolute;
}


.dropdown-menu a {
  color: #000;
  margin: 0;
  padding: 5px 0;
  width: auto;
}

.dropdown-menu a:hover {
  display: block;
  transition: .2s all ease-in-out;
  background: none;
  color: #c1ae8d;
}

ul {
  margin: 0 auto;
  align-items: center;
  list-style-type: none;
}

.subtitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
  background-color: transparent;
  border-color: transparent;
}

.btn-2:hover,
.btn-2:active,
.btn-2:focus {
  background-color: transparent;
  border-color: transparent;
}

.btn-2 {
  color: #ffffff;
}



@media (max-width: 768px) {
  .navbar {
    background-color: #ffffff;
  }

  .dropdown:hover>.dropdown-menu {
    display: block;
    padding: 0 0 10px 0;
    text-align: center;
    height: auto;
    width: 100%;
    position: absolute;
    visibility: visible;
  }

  .navbar-toggler,
  .btn-2 {
    color: black;
  }

  .navbar a {
    color: #c1ae8d;
  }

  .mobile-active {
    color: #a08e6e;
  }

  .dropdown-menu {

    text-align: center;
    border-color: transparent;
  }

  .dropdown-menu li {
    text-align: center;
  }


}

这是我目前的项目情况：

我尝试将导航栏组件的背景颜色设置为透明，但它不起作用。我怎样才能做到这一点？谢谢！

*更新 -是的，更改后现在看起来像这样。它为导航栏提供了单独的背景图像，而不是进入大部分。

标签： cssangular

css - 无法更改导航栏的当前背景图像

问题描述

解决方案

推荐阅读