web-dev-qa-db-de.com

Bootstrap 3: Textüberlagerung im Bild

Ich benutze Bootstrap 3-Thumbnail wie folgt:

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

Ich möchte, dass die caption das Bild überlagert, aber wie auf Mashable.com

Ich habe folgendes versucht, aber kein Glück: ((

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

Wie kann ich ein caption div über dem Bild überlagern, aber genau wie (Mashable.com)?

Das funktioniert, aber ich möchte, dass es genau wie Mashable zentriert ist. und für jedes Bild zentriert. Bei einigen Bildern ist es nicht zentriert.

htmlcsscss3twitter-bootstrap-3
28
DarthVader

Sie müssen die Miniaturansicht-Klasse so einstellen, dass sie relativ positioniert wird, und der Post-Inhalt auf absolut. 

Überprüfen Sie diese Geige 

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

.thumbnail{
    position:relative;

}

Wenn Sie oben und links 0 eingeben, wird es in der oberen linken Ecke angezeigt. 

35
Will

Ist es das, was Sie suchen?

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

Ich fügte hinzu: text-align:center zum div und image

7
SaturnsEye

Stellen Sie die Position auf absolut; um den Beschriftungsbereich in die richtige Position zu verschieben

CSS

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

Bootply

1
Daniel

versuchen Sie es mit dem folgenden Beispiel . Bildüberlagerung mit Text im Bild. Demo 

<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