Aggiunta di testo su un'immagine nel carosello Bootstrap

Question

Ho un carosello con un'immagine che vorrei inserire del testo, ma non funziona. Il testo viene visualizzato sotto l'immagine, invece di sovrapposto su di esso

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

Answer 1

si potrebbe semplicemente position l'elemento absolute mente proprio come le didascalie incorporate e impostare le top/bottom, left/right offset.

Si noti che le didascalie giostra hanno z-index: 10 per default, quindi si consiglia di dare l'elemento posizionato un più alto z-index:

Per esempio:

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

Answer 2

Ecco un possibile soluzione:

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> 

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

Supponendo che si desidera loro allineati verticalmente al centro dell'immagine-In sostanza, ti consigliamo di posizionare relativamente lo slide-oggetti genitore div, che sarà eredita la sua altezza dall'altezza combinata dell'immagine e del testo. Quindi, ti consigliamo di creare un div che contenga il testo con l'attributo css position: absolute. Questo elemento sarà un figlio diretto del genitore relativamente posizionato. Ciò ti consentirà di posizionare il testo in modo assoluto all'interno dell'elemento relativamente più vicino posizionato. See this CSS Tricks tutorial to understand how this works.

Ciò consentirà di posizionare il testo sopra l'immagine, quindi sono andato avanti e ho utilizzato il posizionamento del tavolo per consentire di centrarli verticalmente, sebbene potessi andare avanti e posizionarli sopra l'immagine dove preferisci.

Answer 3

spero che aiutare qualcuno, nel mio caso l'ho fatto con il seguente codice:

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