web-dev-qa-db-ja.com

Bootstrap 3：画像上のテキストオーバーレイ

私はbootstrap 3サムネイルを次のように使用しています：

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

captionを画像にオーバーレイしたいが、 Mashable.com で行われている方法

私はフォローしようとしましたが、運はありません：（（

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

caption divを（Mashable.com）のように画像の上にオーバーレイするにはどうすればよいですか？

これは機能しますが、Mashableと同じように中央に配置する必要があります。すべての画像の中央に配置されます。一部の画像では、中央に配置されません。

htmlcsscss3twitter-bootstrap-3
30
DarthVader

サムネイルクラスを相対位置に設定し、ポストコンテンツを絶対位置に設定する必要があります。

これを確認してください fiddle

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

.thumbnail{
    position:relative;

}

左上に0を指定すると、左上隅に表示されます。

35
Will

これはあなたが望んでいることですか？

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

追加した ：text-align:center divおよび画像へ

7
SaturnsEye

位置を絶対に設定します。キャプション領域を正しい位置に移動するには

[〜＃〜] css [〜＃〜]

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

ブートプライ

1
Daniel

次の例を試してください。画像上のテキストを使用した画像オーバーレイ。 デモ

<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