【问题标题】:Problem of background-color with bootstrap 4 navbarbootstrap 4 导航栏的背景颜色问题
【发布时间】:2019-12-28 21:30:13
【问题描述】:

正如标题中提到的,我的导航栏有问题。我不能用 rgba 改变背景颜色和他的不透明度,所以如果你有想法,你能帮我吗?

#navbarr {
  background-color: rgba(0, 0, 0, 0.8);
}
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id='navbarr' role="navigation">
      <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only" id="asupr">Toggle navigation</span>
        &#x2630;</button>
        <a class="navbar-brand" href="index.html">Portfolio</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav ml-auto">
            <li class="active nav-item"><a href="index.html" class="nav-link">Accueil</a>
            </li>
            <li class="nav-item"><a href="works.html" class="smoothscroll nav-link">Travaux</a>
            </li>
            <li class="nav-item"><a href="contact.html" class="smoothscroll nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

【问题讨论】:

  • 似乎工作正常。

标签: html css bootstrap-4 navbar


【解决方案1】:

移除 bg-dark 类。

<div class="navbar navbar-dark fixed-top navbar-expand-md" id='navbarr' role="navigation">
      <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only" id="asupr">Toggle navigation</span>
        &#x2630;</button>
        <a class="navbar-brand" href="index.html">Portfolio</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav ml-auto">
            <li class="active nav-item"><a href="index.html" class="nav-link">Accueil</a>
            </li>
            <li class="nav-item"><a href="works.html" class="smoothscroll nav-link">Travaux</a>
            </li>
            <li class="nav-item"><a href="contact.html" class="smoothscroll nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

【讨论】:

    猜你喜欢
    • 2018-10-24
    • 1970-01-01
    • 1970-01-01
    • 2017-09-08
    • 2015-05-09
    • 1970-01-01
    • 2020-08-12
    • 2018-09-14
    • 1970-01-01
    相关资源
    最近更新 更多