更改 Bootstraps 轮播中的箭头颜色 [英] Change arrow colors in Bootstraps carousel

查看：13
本文介绍了更改 Bootstraps 轮播中的箭头颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我显然在这里遗漏了一些非常简单的东西.我有白色背景的图像，所以我希望能够编辑 Bootstraps Carousel 上的箭头，以便它们可见.这么多改变箭头的颜色(不是像我所做的背景).

CSS

.carousel-control-prev-icon, .carousel-control-next-icon {高度:100px；宽度:100px；轮廓:黑色；背景颜色:rgba(0, 0, 0, 0.3);背景尺寸:100%、100%；边界半径:50%；边框:1px纯黑色；}

轮播 HTML

<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="第一张幻灯片" class = 'img-responsive'>
<div class="carousel-item"><img class="d-block img-fluid" src="carousel/murial.jpg" alt="第二张幻灯片" class = 'img-responsive'>

<div class="carousel-item"><img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="第三张幻灯片" class = 'img-responsive'>

<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">以前的</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">下一步</span></a>

解决方案

我希望这有效，干杯.

.carousel-control-prev-icon,.carousel-control-next-icon {高度:100px；宽度:100px；轮廓:黑色；背景尺寸:100%、100%；边界半径:50%；边框:1px纯黑色；背景图像:无；}.carousel-control-next-icon:after{内容:'>';字体大小:55px；红色;}.carousel-control-prev-icon:after {内容:'<';字体大小:55px；红色;}

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).

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

<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>

解决方案

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

这篇关于更改 Bootstraps 轮播中的箭头颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆