無法從圖像滑塊上方的引導導航中刪除背景色

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%);

但是我認為滑塊發生了一些變化，盡管導航位於滑塊div內，但它仍將滑塊圖像向下推。 當我使用margin-top：-2em將導航條拉回到導航器下方時，它在導航上仍然沒有透明度。 如果在頁面上向下滾動，您將在導航上看到應有的透明背景。 任何提示，不勝感激。

Answer 1

在style.css文件中使用它。

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

Answer 2

• 低於height更改為90％。

.carousel-inner { height: 100%; }

• 並刪除#imagebox的top-margin 。

無法使用當前標記為.carousel-control提供top:0 ，因為它將與菜單重疊。 否則，您應該為#nav-wrapper提供白色背景色，並使用z-index將其顯示在前面。

---

另一個建議是，如果您可以添加帶有<div class="spotlight">包裝carousel-indicators ， carousel-indicators ， left carousel-control和right carousel-control的新div會更好。

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

Answer 3

只需從.carousel-control.right和.carousel-control.left刪除background-image

如您所見，下面的圖像沒有顏色（技術上是背景圖像）。 希望這是您想要的。

Answer 4

將此添加為Abdullah Ibn Farouk所說

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

這是為了使圖像合適。

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

  background-size: cover;
}

Answer 5

bootstrap.min.css更改

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