更改旋轉木馬控制下一個和上一個按鈕v4

我想要改變下一個Crousel控制和旋轉木馬滑塊v4 prev圖像按鈕，但當他們改變他們的顏色具有低透明度，我不知道爲什麼，你能幫助我！更改旋轉木馬控制下一個和上一個按鈕v4

<div id="mycarousel" class="carousel slide bg-inverse" data-ride="carousel"> 
       <ol class="carousel-indicators"> 
        <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
        <li data-target="#mycarousel" data-slide-to="1"></li> 
        <li data-target="#mycarousel" data-slide-to="2"></li> 
       </ol> 
       <div class="carousel-inner" role="listbox"> 
        <div class="carousel-item active"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner0.png" alt="first slide"> 

         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 

         </div> 
        </div> 
        <div class="carousel-item"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner.png" alt="second slide"> 
         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 
         </div> 
        </div> 
        <div class="carousel-item"> <img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner3.png" alt="third slide"> 
         <div class="carousel-caption"> 
          <h3 class="animated fadeInDownBig">Network Security &</h3> 
          <h3 class="animated fadeInDownBig">Modern Data Center</h3> 
          <h3 class="animated fadeInUp">Networking Solutions</h3> 
         </div> 
        </div> 
       </div> 


       <div class="container"> 
        <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> 
        <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> 
       </div> 
      </div>

來源

2017-07-14 Samira Rostami zade

更好地給出更多細節你試試 –

在Bootstrap v4中，下一個prev輪播控制圖標現在是SVG圖像。因此，不能直接使用CSS樣式屬性來更改圖標顏色（仍然可以更改background-color）。以下是更改圖標顏色的解決方法。

如果您使用prev和next圖標瀏覽器檢查，你會看到下面的款式bootstrap.min.css

.carousel-control-next-icon { 
    background-image: url(....); 
} 
.carousel-control-prev-icon { 
    background-image: url(....); 
}

要更改圖標顏色，覆蓋在下面SVG代碼fill屬性來。（默認顏色：%23fff，新顏色：%343A40）

.carousel-control-next-icon { 
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; 
} 
.carousel-control-prev-icon { 
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%343A40' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; 
}

現在你的轉盤控制圖標必須出現在新的顏色。

來源

2017-09-30 15:01:44

更改旋轉木馬控制下一個和上一個按鈕v4

回答

相關問題