jquery - 更改轮播控制下一个和上一个按钮 v4

Question

我想更改轮播 slider 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>

Answer 1

在 Bootstrap v4 中，下一个和上一个轮播控件图标现在是 SVG 图像。因此，您不能直接使用CSS样式属性来更改图标颜色(但您仍然可以更改background-color)。这是更改图标颜色的解决方法。

如果您在上一个和下一个图标上使用浏览器检查器，您将看到来自 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;
}

现在您的轮播控件图标必须以新颜色显示。