logo标签列表

在Bootstrap轮播中更改箭头颜色

htmlcsstwitter-bootstrapbootstrap-4carousel
114

很明显我在这里错过了一些极其简单的东西。我的图片有白色背景，所以我想编辑Bootstrap轮播图上的箭头使它们可见。我希望改变箭头的颜色（而不是像我已经做的那样改变背景）。

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>
1
你能提供一个在JSFiddle上运行的示例吗？ - Phani Kumar M
17个回答
190

我知道这是一篇较旧的帖子，但它帮助了我。我还发现在Bootstrap 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' 是红色，以此类推。需要注意的是，如果没有 !important 声明，我尚未测试过这一点。

这是一个很好的解决方案，非常感谢。建议添加.carousel父类以避免使用！important。 - Simon
175

如果你只想在Bootstrap 4+中将它们变为黑色。

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}
11
更简洁，更易用。我个人不喜欢BS4这种方法以及他们的background-image: svg...解决方案。 - Yes Barry
1
Bootstrap 4.3 的正确类名是 carousel-control-prev。 - Aline Matos
3
你可以添加.carousel-indicators来实现指示器的相同效果。 - Dylan
这是五年前的内容，我已经将其更改为黑色，谢谢 :) - daddycardona
112

.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;
}

抱歉回复晚了。是的，那似乎起作用了。非常感谢！ - Paul Young
不用谢，希望你能投票支持我的回答，这对我来说很有帮助，干杯！ - nifoem bar
抱歉，我对此还不熟悉。已完成 :) - Paul Young
22
这会改变页面的样式，并添加一种不同风格的箭头，而不是改变现有箭头的颜色。 - programmingandroid
2
不，这并不会改变默认控件的颜色...它只是添加了一个元素。 - sea26.2
19

您还应该使用: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span> 使用fontawesome。您必须覆盖原始代码。按照以下步骤操作，您就可以在CSS上自定义：

<a class="carousel-control-prev" href="#carouselExampleIndicatorsTestim" role="button" data-slide="prev">
    <span><i class="fa fa-angle-left" aria-hidden="true"></i></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicatorsTestim" role="button" data-slide="next">
    <span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
    <span class="sr-only">Next</span>
 </a>

原始代码

<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>
虽然其他答案也可以正常工作，但这个更有意义且更易于使用。感谢您的参与！ - Michael
这在Angular中不起作用。 - Raul Chiarella
6

目前Bootstrap 4使用带有嵌入式SVG数据信息的background-image，该信息包括SVG形状的颜色。类似于：

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

请注意fill='%23fff'的部分，它用一种颜色填充了形状，这里是#fff（白色），如果要变成红色，只需用#f00替换即可。
最后，可以安全地包含此更改（next-icon也同样更改）。
.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"); }
6
将 .carousel-dark 添加到 .carousel 中，可以使控制按钮、指示器和标题变暗。
参见：Bootstrap 5 文档
4

这是一个我亲自测试过的小例子

    .carousel-control-prev,
    .carousel-control-next{
        height: 50px;
        width: 50px;
        outline: $color-white;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid $color-white;
        background-color: $color-white;
    }

    .carousel-control-prev-icon { 
        background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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"); 
        width: 30px;
        height: 48px;
    }
    .carousel-control-next-icon { 
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' 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");
        width: 30px;
        height: 48px;
    }
3
3
这对我有用：
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
      
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

我改变了图标 URL 中的颜色。这是在 Bootstrap 页面中使用的原始颜色，但是该部分现在被改为黑色：

"...fill='%23000'..."

2
您还可以像这样使用特定颜色：fill='darkorange' svg支持的颜色在此处 - https://www.december.com/html/spec/colorsvg.html - Manic Depression
2

对于Bootstrap 3，可以使用以下代码：

.carousel-control span.glyphicon {
    color: red;
}
谢谢您的建议，但我正在使用Bootstrap 4。 - Paul Young
我正在使用Bootstrap 3，谢谢Keshav，你指引了我正确的方向，但我不得不在CSS中编写： .carousel-control span.icon-prev，span.icon-next { color: red; } - ionescu77
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接