Question

我已经保存了一个简单的代码，所以当我创建一个引导程序站点时，我可以从那里开始。今天我正在玩我正在处理的响应代码，导航栏神秘地没有给我一个透明的背景。我测试给它一个彩色背景，它的工作原理，但它背后有一些次要背景保持浅灰色。我不能为我的生活找出原因。

以下是正在进行的网站的链接。对不起，它现在非常凌乱。 http://dismantledesign.com/phantasm

这是应该将导航栏更改为透明的CSS。我似乎无法找到保持导航栏灰色的罪魁祸首。

@media(min-width:768px){
  .navbar-default .navbar-collapse{ background: none; border: none; }
  .navbar-default .navbar-nav{ float: right; }
  .navbar-default .navbar-nav>li{ margin-left: 20px; color: #fff; }
  .navbar-default .navbar-nav>li>a{ color: #fff; }
  .navbar-default .navbar-nav>li>a:hover{ color: #fff; }
  .navbar-default .navbar-nav>.active>a, 
  .navbar-default .navbar-nav>.active>a:hover,
  .navbar-default .navbar-nav>.active>a:focus{ color: #fff; }
}

Answer 1

添加以下代码。如果您检查.navbar-default css，则已应用背景颜色#f8f8f8将其更改为透明或无。

.navbar-default {
   background-color: transparent ; 
}

或者您也可以添加这些正常工作

nav.navbar.navbar-default {
   background-color: none;
}

Answer 2

我已将您的组件设为透明，请参阅

您无法透明地显示您的组件，因为您使用的课程背景颜色属性设置为＃f8f8f8 （ .navbar-默认）。

我建议你覆盖背景属性，例如 background-color：＃000！important; ，通过应用CSS内联或给组件一些类，然后制作你选择的背景颜色然后你可以自由设置不透明度：0.8 或任何你想要的东西。

希望你明白，如果你被困住，请告诉我。

Bootstrap Nav很奇怪

2 个答案: