logo标签列表

在Bootstrap轮播中添加图片上的文本

htmlcsstwitter-bootstrapcarousel
9

我有一个带有图片的轮播图，想要在图片上叠加文字，但是不成功。文字出现在图片下方而非覆盖在其上。

<!-- WRAPPER FOR SLIDES -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="carousel-content">
                                <img src="img/Slide 1.jpg" alt="..." position="relative">
                                <p>TEST</p>
                            </div>

                            <div class="carousel-caption">
                                <h3>What we do</h3>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1200x315" alt="...">
                            <div class="carousel-caption">
                                <h3>What we Do</h3>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1200x315" alt="...">
                            <div class="carousel-caption">
                                <h3>Who we Are</h3>
                            </div>
                        </div>
                    </div>
你能发一个 JSFiddle 吗？通常，解决这些问题的方法是通过相对/绝对定位。 - nikk wong
4个回答
18

您可以像内置标题一样，简单地将元素 position 属性设置为 absolute，并设置 top/bottom, left/right 偏移量。

请注意，轮播图标题的默认 z-index: 10，因此您可能希望为定位元素指定更高的 z-index：

例如：

.carousel-content {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="active item">
      <img src="http://lorempixel.com/1200/315" alt="...">
      <div class="carousel-content">
        <p>TEST</p>
      </div>
      <div class="carousel-caption">
        <h3>What we do</h3>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x315" alt="...">
      <div class="carousel-caption">
        <h3>What we Do</h3>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x315" alt="...">
      <div class="carousel-caption">
        <h3>Who we Are</h3>
      </div>
    </div>
  </div>
</div>

4
这里有一个可能的解决方案：
jsfiddle：http://jsfiddle.net/38v09vha/ 
            <div class="carousel-inner">
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
           </div>

并且css:

.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.absolute-div {
    position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
}

.carousel-caption h3 {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.item {
    position:relative;
}

假设您希望它们在图像中垂直居中对齐-基本上，您需要相对定位滑动项的父 div，该 div 将从图像和文本的组合高度继承其高度。然后，您需要创建一个容纳文本的 div，该 div 具有 css 属性 position: absolute。该元素将是相对定位父级的直接子元素。这将允许您在最近的相对定位元素内绝对定位文本。请参阅 CSS Tricks 教程以了解其工作原理。
这将使您能够在图像上定位文本，我然后使用表格定位使其垂直居中，但您也可以将它们放置在图像上的任何位置。
4
希望能对某些人有所帮助，在我的情况下，我使用以下代码完成了它：
<style>
.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.carousel-caption div {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.trickcenter {
    position: fixed;
    top: 84%; // 50% for perfect centering
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<div class="item">
    <img src="images/slider_T02.jpg" alt="Moto de collection">
    <div class="carousel-caption trickcenter">
        <div>HERE THE TEXT YOU WANT</div>
    </div>
</div>

<div class="item">
    <img src="images/slider_T03.jpg" alt="Véhicule Haut de Gamme">
    <div class="carousel-caption trickcenter">
        <div>HERE THE SECOND TEXT</div>
    </div>
</div>
2
您可以在carousel-item上使用card类，并将所有内容放入div.card-img-overlay中。
<div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">

   <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
         aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
         aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
         aria-label="Slide 3"></button>
   </div>

   <div class="carousel-inner">
      
      <div class="carousel-item active card"> <!-- add .card here -->

         <div class="card-img-overlay">
            <!-- h2, p and button is defined here -->
         </div>

         <img src="./path/to/1.png" class="d-block w-100" alt="...">
      </div>

      <div class="carousel-item card"> <!-- add .card here -->

         <div class="card-img-overlay">
            Some text here...
         </div>

         <img src="./path/to/2.png" class="d-block w-100" alt="...">
      </div>

      <div class="carousel-item card"> <!-- add .card here -->

         <div class="card-img-overlay">
            Some text here as well...
         </div>

         <img src="./path/to/3.png" class="d-block w-100" alt="...">
      </div>
   </div>
</div>

结果 幻灯片1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接