html - [轮播]文本下方的深色背景和圆圈分页[bootstrap 4]

Question

有没有人能帮我解决 2 个东西或其中一个在 boostrap 4 上的问题 我想像在这个 IMG 上一样做两件事: https://i.imgur.com/Vh1CDe3.png

1- 标题/副标题轮播下方的深色背景

2- 我把分页做得更高，更圆... 但是如何在圆圈内显示呢？

它现在是如何工作的: i.imgur.com/NT48cqX.png

完整代码:

<style type="text/css">

/* dark background */
#news img {
    width: 1300px;
    height: 400px;
}

div.carousel-caption {
    background:rgba(0,0,0,0.6);
    text-shadow:none;
}

div.carousel-caption:hover {
    background:rgba(0,0,0,0.9);
}

/* Carousel Title */
h3, .h3 {
  font-size:20px;
  color: #063;
  font-family:'Buenard', serif;
  font-weight:bold;
  text-transform:inherit;
  margin: 0px auto 0px;
  text-shadow: 2px 2px 2px #000;
  -webkit-text-shadow: 2px 2px 2px #000;
  -moz-text-shadow: 2px 2px 2px #000;
  text-align: center;
}

/* Pagination */


.carousel-indicators .active {
    background: #666;
}

.carousel-indicators :hover {
    background-color: #cccccc;
}



.slider-pagi__elem {
    padding: 10px 10px;
    color: #083F2C;
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;

    font-family: Arial;
    font-size: 16.9px;

    position: relative;
    bottom: 350px;
    left: 480px;

    display: inline-block;
    vertical-align: top;
    width: 2rem;
    height: 2rem;
    margin: 0 0.5rem;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
}
</style>

<main role="main" class="container_body">



<div class="container" id="news">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- indicators dot nov -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="slider-pagi__elem slider-pagi__elem-2"class="active">1</li>
    <li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="1">2</li>
    <li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="2">3</li>
    <li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="3">4</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/900x400" alt="">
        <div class="carousel-caption">
            <h3><a href="#">Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></h3>
            <p>Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb. <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
        <div class="carousel-caption">
           <h3><a href="#">Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</a></h3>
            <p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
        <div class="carousel-caption">
           <h3><a href="#">Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</a></h3>
            <p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
        <div class="carousel-caption">
           <h3><a href="#">Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</a></h3>
            <p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></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>
</div>




</main>

Answer 1

底部的深色背景应该是 div，而不是图像。您可能可以在具有 carousel-caption 类的 div 上执行此操作。

编辑:获取 carousel-caption 全宽，将 .carousel-caption 从 right: 15% 更改为 right: 0% 和 left: 15 % 到 左:0%

这将使文本一路走下去。如果您需要从边缘留出一些空间，请不要忘记添加一些填充。