更改Bootstraps旋转木马中的箭头颜色

我显然在这里错失了一些愚蠢简单的东西。我有一个白色背景的图像，所以我想能够编辑Bootstraps旋转木马上的箭头，以便它们可见。很多改变箭头的颜色（不像我做过的背景）。更改Bootstraps旋转木马中的箭头颜色

CSS

.carousel-control-prev-icon, .carousel-control-next-icon { 
    height: 100px; 
    width: 100px; 
    outline: black; 
    background-color: rgba(0, 0, 0, 0.3); 
    background-size: 100%, 100%; 
    border-radius: 50%; 
    border: 1px solid black; 
}

旋转木马HTML

<div class = 'col-md-9'> 

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner" role="listbox"> 
      <div class="carousel-item active"> 
       <img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'> 
      </div> 

      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'> 
      </div> 

      <div class="carousel-item"> 
       <img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'> 
      </div> 
     </div> 

     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 

     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 

    </div> 

</div>

来源

2017-09-16 Paul Young

你可以在JSFiddle中提供任何运行的例子吗？ –

我希望这个作品，欢呼声。

.carousel-control-prev-icon, 
 
.carousel-control-next-icon { 
 
    height: 100px; 
 
    width: 100px; 
 
    outline: black; 
 
    background-size: 100%, 100%; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    background-image: none; 
 
} 
 

 
.carousel-control-next-icon:after 
 
{ 
 
    content: '>'; 
 
    font-size: 55px; 
 
    color: red; 
 
} 
 

 
.carousel-control-prev-icon:after { 
 
    content: '<'; 
 
    font-size: 55px; 
 
    color: red; 
 
}

来源

2017-09-16 05:35:37

抱歉，延迟响应。是的，这似乎工作。非常感谢！ –

不客气，我希望你能投我的答案，帮助我很多，欢呼 –

对不起，我是新手。完成:) –

用于引导-3可以使用：

.carousel-control span.glyphicon { 
    color: red; 
}

来源

2017-09-16 06:06:57

感谢您的建议，但我使用Bootstrap 4。 –

我知道这是一个老帖子，但它帮了我。我还发现，对于引导V4还可以通过重写控制这样的改变箭头的颜色：

.carousel-control-prev-icon { 
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 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; 
} 

.carousel-control-next-icon { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 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; 
}

如果你改变fill='%23fff'的FFF末到任何你想要的十六进制值。例如：

fill='%23000'为黑色，fill='%23ff0000'为红色等。请注意，如果没有！重要声明，我没有测试过。

来源

2018-02-27 20:56:14

更改Bootstraps旋转木马中的箭头颜色

回答

相关问题