web-dev-qa-db-fra.com

Ajouter du texte sur une image dans le carrousel Bootstrap

J'ai un carrousel avec une image sur laquelle je voudrais mettre du texte, mais cela ne fonctionne pas. Le texte apparaît sous l'image au lieu d'être superposé dessus

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

Vous pouvez simplement position l'élément absolutely comme les légendes intégrées et définir les top/bottom, left/right décalages.

Notez que les légendes du carrousel ont z-index: 10 par défaut, vous souhaiterez donc peut-être donner à l'élément positionné une valeur plus élevée z-index:

Par exemple:

.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

Voici une solution possible:

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>

et 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;
}

En supposant que vous voulez qu'ils soient alignés verticalement au milieu de l'image - Fondamentalement, vous voudrez positionner relativement le div parent des éléments de diapositive, qui héritera de sa hauteur de la hauteur combinée de l'image et du texte. Ensuite, vous voudrez créer un div qui héberge le texte qui a l'attribut css position: absolute. Cet élément sera un enfant direct du parent relativement positionné. Cela vous permettra de positionner absolument votre texte dans l'élément relativement positionné le plus proche. Voir ce tutoriel CSS Tricks pour comprendre comment cela fonctionne .

Cela vous permettra de positionner le texte sur l'image, j'ai ensuite utilisé le positionnement du tableau pour vous permettre de les centrer verticalement, bien que vous puissiez aller de l'avant et les placer sur l'image où vous le souhaitez.

3
nikk wong

J'espère que cela aidera quelqu'un, dans mon cas, je l'ai fait avec le code suivant:

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