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从right: 15%更改为right: 0%和left: 15%更改为left: 0%

这将使文本一直进行。如果你需要从边缘留出一些空间，不要忘记包括一些填充。

[Carousel]黑暗背景下方文字和圆形分页[boostrap 4]

1 个答案: