Question

我想更改下面的crousel控件和旋转木马滑块v4的prev图像按钮但是当他们改变它们的颜色时低透明度，我不知道为什么，你能帮我!!

  <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）。以下是更改图标颜色的解决方法。

如果您在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;
}

现在，您的转盘控制图标必须以新颜色显示。

改变轮播控制下一个和上一个按钮v4

1 个答案: