【发布时间】：2019-11-06 15:57:41
【问题描述】：
我正在尝试在 Bootstrap 4 的轮播中做两件事
1- img 文本中的阴影，在 carousel-caption 中使用文本下方的这种深色效果
2- 圆圈格式的指标，里面有一个数字
这 2 件事就像这个 IMG： https://i.imgur.com/gH9TGQ0.png
我已经试过了：
<script>
/* shadow */
.carousel-caption {
background: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,.5);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
/* circle indicators and numbers */
.carousel-indicators-numbers {
li {
text-indent: 0;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
&.active, &:hover {
margin: 0 2px;
width: 30px;
height: 30px;
background-color: #337ab7;
}
}
}
</script>
<!-- carrousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2</li>
<li data-target="#carousel-example-generic" data-slide-to="2">3</li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 1</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 2</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
<div class="carousel-caption">
<a href="#"><h3>News 3</h3></a>
<p>Bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
</div>
<!-- controls or next and prev buttons -->
<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>
</div>
但没有任何效果，它就像默认引导轮播一样显示： https://i.imgur.com/xcLAPk1.png
【问题讨论】：
标签： javascript html css twitter-bootstrap bootstrap-4