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

Question

我有一个带图像的旋转木马，我想将文本放在上面，但它不起作用。文本显示在图像下方，而不是覆盖在图像上方

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

原文由 jsan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

You could simply position the element absolute ly just like built-in captions and set the 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>

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 3.0 许可协议