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个回答
1
如果您正在使用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>

打开 bootstrap.min.css 文件，找到属性 "glyphicon-chevron-right" 并添加属性 "color:red"

1
要更改颜色，您应该将样式添加到CSS文件中，并在用作类.carousel-control-prev-icon和.carousel-control-next-icon的背景图像的svg代码中的fill属性中进行小修改。 fill ='％23fff'仅更改fff以获得所需的颜色，例如f00为红色。 （也可以使用6个字母的十六进制--％23ff0000）
.carousel-control-pre-icon {background-image：url（“data：image / svg + xml，％3csvg xmlns ='http：//www.w3.org/2000/svg' fill ='％23fff' 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-container .carousel .carousel-control-next .carousel-control-next-icon
你的回答非常清晰，只需要稍微修改就是正确的答案。 - Ali reza Soleimani Asl
1
我也遇到了类似的问题，一些图像非常浅，一些很暗，所以箭头并不总是清晰可见，因此我采取了更简单的方法。 在 modal-body 部分，我只是删除了以下几行:
    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#id" data-slide="prev">
       <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#id" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

并将以下内容插入到modal-header部分
    <!-- Left and right controls -->
    <a  href="#gamespandp" data-slide="prev" class="btn btn-outline-secondary btn-sm">&#10094;</a>
    <a  href="#gamespandp"  data-slide="next" class="btn btn-outline-secondary btn-sm">&#10095;</a>

指标现在可以清晰地看到，不需要添加额外的图标或混乱的样式表，虽然您可以按照自己的喜好进行样式设置！
请查看此演示图片：

[demo Image]

这完全没有回答原问题。 - MrUpsidown
2
我的回答为什么不回答MrBacktofront的原始问题呢？“我有带有白色背景的图像，因此我希望能够编辑Bootstraps Carousel上的箭头，使它们可见”我的解决方案编辑了箭头并使其可见，无论图像如何。 - Rebel
1
由于问题已经得到正确回答，我的回答显然是一种替代解决方案，可以让用户在任何颜色冲突的情况下进行导航。至于美观性，我确实明确表示可以按自己的喜好对其进行样式设计，也许您的眼睛受到 HTML 实体的奇怪丑陋影响而未能读到这一部分！关于被投反对票，既然似乎只有您有问题，我会让它保持原样。 - Rebel
1

使用CSS，可以通过填充参数来自定义控制类和图标类的图标颜色。并且可以添加一个悬停alpha类到背景：

.carousel-control-prev-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' 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='%23000000' 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");}
<--! alpha background -->
.carousel-control-next:hover, .carousel-control-prev:hover {
background-color:rgba(0, 0, 0, 0);}
0

使用纯CSS将它们替换为Font Awesome：

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-image: none;
}

.carousel-control-prev-icon:after, .carousel-control-next-icon:after {     
  content: "\f053";
  font-family: 'Font Awesome 5 Free', sans-serif;
}

.carousel-control-next-icon:after {
  content: "\f054";
}
你是对的。我们应该设置background-image:none;，然后通过:after和:before定义新对象。 - Ali reza Soleimani Asl
0

如果要使用Sass自定义轮播控件、标题和指示器的颜色，可以包含以下变量

    $carousel-control-color: 
    $carousel-caption-color: 
    $carousel-indicator-active-bg:
它对我起作用了，除了变量$carousel-indicator-active-bg没有起作用。 - Daniel
-1

使用 Font Awesome 图标：

<!-- Controls -->
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="fa fa-chevron-left fa-lg" style="color:red;"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="fa fa-chevron-right fa-lg" style="color:red;"></span>
  <span class="sr-only">Next</span>
</a>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接