更改旋转木马控制下一个和上一个按钮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

回答

相关问题