web-dev-qa-db-fra.com

Bootstrap 3: Superposition de texte sur une image

J'utilise la vignette bootstrap 3 comme suit:

<div class="thumbnail">
    <img src="/img/robot.jpg" alt="..." />
    <div class="caption post-content">
        <h3>Robots!</h3>
        <p>Lorem ipsum dolor sit amet</p> 
    </div>
</div>

Je veux que la caption se superpose à une image mais la manière de le faire sur Mashable.com

J'ai essayé de suivre mais pas de chance: ((

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: relative;
}

Comment puis-je superposer une caption div au dessus de l'image mais juste comme (Mashable.com)?

Cela fonctionne mais je veux que ce soit centré comme Mashable. et centré pour chaque image. pour certaines images, il n'est pas centré.

htmlcsscss3twitter-bootstrap-3
28
DarthVader

Vous devez définir la classe de vignettes pour positionner relatif puis le contenu postérieur en absolu. 

Vérifiez ceci violon 

.post-content {
    top:0;
    left:0;
    position: absolute;
}

.thumbnail{
    position:relative;

}

Donner 0 en haut et à gauche le fera apparaître dans le coin en haut à gauche. 

35
Will

Est-ce ce que vous recherchez?

http://jsfiddle.net/dCNXU/1/

J'ai ajouté: text-align:center à la div et à l'image

7
SaturnsEye

Définissez la position sur absolue; déplacer la zone de légende dans la position correcte

CSS

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: absolute;
}

Bootply

1
Daniel

essayez l'exemple suivant . Incrustation d'image avec du texte sur l'image. démo 

<div class="thumbnail">
  <img src="https://s3.amazonaws.com/discount_now_staging/uploads/ed964a11-e089-4c61-b927-9623a3fe9dcb/direct_uploader_2F50cc1daf-465f-48f0-8417-b04ac68a999d_2FN_19_jewelry.jpg" alt="..."   />
  <div class="caption post-content">  
  </div> 
  <div class="details">
    <h3>Robots!</h3>
    <p>Lorem ipsum dolor sit amet</p>   
  </div>  
</div>

css

.post-content {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    opacity: 0.5;
    top:0;
    left:0;
    min-width: 500px;
    min-height: 500px; 
    position: absolute;
    color: #ffffff; 
}

.thumbnail{
    position:relative;

}
.details {
    position: absolute; 
    z-index: 2; 
    top: 0;
    color: #ffffff; 
}
0
aashish