html - html更改 Bootstrap 4 carousel 控件颜色

我使用Bootstrap 4.0,希望能改变控件的颜色,

以下是控件代码:


<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>



时间:

如果想修改Bootstrap css (或者carousel控件颜色),可以很容易做到。

以下是控制carousel控件颜色的规则:


.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");


}



.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");


}



在fill='#fff'部分,用所需颜色的十六进制代码替换fff。

下面是一个能工作的代码段,其中fill='#fff'已被fill='#f00'替换为red,而不是white:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<style>


.carousel-control-prev-icon {


 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");


}



.carousel-control-next-icon {


 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");


}


</style>



<div class="container">


 <div class="row">


 <div class="col">


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


 <div class="carousel-inner">


 <div class="carousel-item active">


 <img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">


 </div>


 <div class="carousel-item">


 <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">


 </div>


 <div class="carousel-item">


 <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">


 </div>


 </div>


 <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">


 <span class="carousel-control-next-icon" aria-hidden="true"></span>


 <span class="sr-only">Next</span>


 </a>


 </div>


 </div>


 </div>


</div>

...