Html 更改 Bootstraps 轮播中的箭头颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46249541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change arrow colors in Bootstraps carousel
提问by Paul Young
I'm obviously missing something stupidly simple here. I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible. So many changing the color of the arrows (NOT the background like I've done).
我显然在这里错过了一些非常简单的东西。我有白色背景的图像，所以我希望能够编辑 Bootstraps Carousel 上的箭头，以便它们可见。这么多改变箭头的颜色（不是像我所做的背景）。
CSS
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;
}
Carousel HTML
轮播 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>
回答by Frank A.
I know this is an older post, but it helped me out. I've also found that for bootstrap v4 you can also change the arrow color by overriding the controls like this:
我知道这是一个较旧的帖子，但它帮助了我。我还发现，对于 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;
}
Where you change fill='%23fff'the fff at the end to any hexadecimal value that you want. For example:
您将最后fill='%23fff'的 fff更改为您想要的任何十六进制值。例如：
fill='%23000'for black, fill='%23ff0000'for red and so on. Just a note, I haven't tested this without the !important declaration.
fill='%23000'黑色，fill='%23ff0000'红色等。请注意，我没有在没有 !important 声明的情况下测试过这个。
回答by nifoem bar
I hope this works, cheers.
我希望这有效，干杯。
.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;
}回答by Chris Gunawardena
If you just want to make them black in Bootstrap 4+.
如果你只是想让它们在 Bootstrap 4+ 中变黑。
.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
}
回答by Unison Tek
You should use also: <span><i class="fa fa-angle-left" aria-hidden="true"></i></span>using fontawesome. You have to overwrite the original code. Do the following and you'll be free to customize on CSS:
您还应该使用：<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>
The original code
原始代码
<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>
回答by JDuarteDJ
Currently Bootstrap 4 uses a background-image with embbed SVG data info that include the color of the SVG shape. Something like:
目前，Bootstrap 4 使用带有嵌入 SVG 数据信息的背景图像，其中包括 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"); }
Note the part about fill='%23fff'it fills the shape with a color, in this case #fff (white), for red simply replace with #f00
注意关于fill='%23fff'它的部分用颜色填充形状，在这种情况下为#fff（白色），红色只需替换为#f00
Finally, it is safe to include this (same change for 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"); }
回答by Cadmium
In bootstrap 4 if you are just changing the colour of the controls you can use the sass variables, typically in custom.scss:
在引导程序 4 中，如果您只是更改控件的颜色，则可以使用 sass 变量，通常在 custom.scss 中：
$carousel-control-color: #7b277d;
$carousel-control-color: #7b277d;
As highlighted in this github issue note: https://github.com/twbs/bootstrap/issues/21985#issuecomment-281402443
正如此 github 问题说明中所强调的：https: //github.com/twbs/bootstrap/issues/21985#issuecomment-281402443
回答by TrinitA
a little example that works for me
一个对我有用的小例子
.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;
}
回答by Keshav Bhadouria
for bootstrap-3 one can use:
对于 bootstrap-3，可以使用：
.carousel-control span.glyphicon {
color: red;
}
回答by PADMAJA SONWANE
If you are using bootstrap.min.css for carousel-
如果您使用 bootstrap.min.css 进行轮播 -
<a class="left carousel-control" href="#carouselExample" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselExample" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
Open the bootstrap.min.css file and find the property "glyphicon-chevron-right" and add the property "color:red"
打开 bootstrap.min.css 文件，找到属性“glyphicon-chevron-right”并添加属性“color:red”
回答by Daniel Burns
To customize the colors for the carousel controls, captions, and indicators using Sass you can include these variables
要使用 Sass 自定义轮播控件、标题和指示器的颜色，您可以包含这些变量
$carousel-control-color:
$carousel-caption-color:
$carousel-indicator-active-bg:
