无法从图像滑块上的引导导航中删除背景颜色答案

【问题标题】：Cant remove background color from bootstrap nav over image slider无法从图像滑块上的引导导航中删除背景颜色
【发布时间】：2015-08-17 01:51:15
【问题描述】：

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

我将这个 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%);

但我认为滑块发生了一些事情，尽管导航位于滑块 div 内，但它仍在将滑块图像向下推。当我使用 margin-top:-2em 将滑块拉回导航下方时，导航仍然没有透明度。如果您在页面上向下滚动，您将在导航上看到您应该看到的透明背景。非常感谢任何提示。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

将height 以下更改为 90%。

.carousel-inner { height: 100%; }

并删除top-margin 的#imagebox。

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

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

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

【讨论】：

【解决方案2】：

在你的 style.css 文件中使用它。

.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}

【讨论】：

【解决方案3】：

只需从.carousel-control.right 和.carousel-control.left 中删除background-image

如下图所示，没有颜色（技术上是背景图像）。希望这是您正在寻找的。

【讨论】：

【解决方案4】：

按照阿卜杜拉·伊本·法鲁克所说的添加这个

.carousel-control.left {background-image:none;}
.carousel-control.right {background-image:none;}

这是为了使图像正确适合..

 .fill{
width: 100%;
  height: 100%;

  background-size: cover;
}

【讨论】：

【解决方案5】：

更改bootstrap.min.css

.carousel-control.left, .carousel-control.right { background-image: none; }

【讨论】：