web-dev-qa-db-ja.com

Bootstrapカルーセルの画像にテキストを追加する

テキストを重ねたいイメージのカルーセルがありますが、機能しません。テキストは、画像の上にオーバーレイされるのではなく、画像の下に表示されます

<!-- 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>
htmlcsstwitter-bootstrapcarousel
6
jsan

組み込みのキャプションと同じように、エレメントpositionlyを単に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>
14
Hashem Qolami

考えられる解決策は次のとおりです。

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を相対的に配置します。これにより、画像とテキストの高さの合計から高さが継承されます。次に、css属性を持つテキストを格納するdivを作成しますposition: absolute。この要素は、相対的に配置された親の直接の子になります。これにより、最も近い相対的に配置された要素内にテキストを絶対に配置できます。 これがどのように機能するかを理解するには、このCSSトリックのチュートリアルを参照してください 。

これにより、テキストを画像上に配置できます。次に、テーブルの配置を使用して、垂直方向に中央に配置できるようにしましたが、好きな場所に画像の上に配置できます。

3
nikk wong

それが誰かを助けることを願っています、私の場合、私は次のコードでそれをしました：

<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>
3
Vivien G.