小编Pau*_*ung的帖子

更改Bootstraps轮播中的箭头颜色

我显然在这里错过了一些愚蠢的东西.我有白色背景的图像,所以我希望能够编辑Bootstraps Carousel上的箭头,以便它们可见.如此多的改变箭头的颜色(不像我做的那样背景).

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;
}
Run Code Online (Sandbox Code Playgroud)

轮播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"> …
Run Code Online (Sandbox Code Playgroud)

html css carousel twitter-bootstrap bootstrap-4

34
推荐指数
6
解决办法
7万
查看次数

标签 统计

bootstrap-4 ×1

carousel ×1

css ×1

html ×1

twitter-bootstrap ×1