javascript - 无法从图像 slider 上的 Bootstrap 导航中删除背景颜色

Question

澄清一下，我正在尝试将顶部的第二个导航栏更改为透明，以便您可以透过它看到它后面的图像。

我将此 CSS 应用到导航栏，这通常适用于透明度:

#nav > .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);

但我认为 slider 发生了一些变化，虽然导航在 slider div 内部，但它仍然将 slider 图像向下推。当我使用 margin-top:-2em 将 slider 拉回导航下方时，导航仍然不透明。如果您在页面上向下滚动，您将在导航栏上看到您应该看到的透明背景。非常感谢任何提示。

Answer 1

• 在下方更改height到 90%。

.carousel-inner { height: 100%; }

• 并删除 top-margin对于 #imagebox .

不能给top:0对于 .carousel-control使用当前标记，因为它将与菜单重叠。否则你应该给 #nav-wrapper 赋予白色背景颜色并使用 z-index 将其置于最前面。

---

另一个建议是，如果你能用<div class="spotlight"> 添加一个新的div 会更好。包装 carousel-indicators , carousel-indicators , left carousel-control和 right carousel-control .

.spotlight {
   position: relative;
   width: 100%;
   height: 90%;
}