Bootstrap:仅在打开时将navbar-fixed-top背景设置为半透明

时间:2014-05-07 19:25:41

标签: css twitter-bootstrap

我正在构建一个Angularjs + Twitter Bootstrap应用程序 我想在我的顶级导航栏中使用 navbar-fixed-top 类,因为我想 - 在移动(折叠)模式下 - 要显示的导航栏项下拉列表/ em>页面内容,无需按下内容 我还希望将打开下拉列表的背景设置为半透明。我觉得我很喜欢这样的CSS:

.navbar-fixed-top {
  background-color: rgba(0,0,0,0.9);
  background-image: none;
}

唯一的问题是,使用此css,关闭导航栏也是半透明的。 是否可以将属性设置为打开导航栏?

更新
srrvnn 回答(谢谢!),我确实解决了:

.navbar-collapse.collapsing,
.navbar-collapse.in {
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.80);
}

1 个答案:

答案 0 :(得分:2)

导航栏经历了两个类,我们需要修改它们。

.navbar-collapse.collapsing,   
.navbar-collapse.in {

    position: absolute; 
    background-color: // whatever for transparent

}

通过制作position: absolute,我们将其从流量中移除,从而使其显示在我们的内容上,并且我们还在此处设置了背景属性。