Bootstrap 3: Text overlay on image

问题:

I am using bootstrap 3 thumbnail as follows:

        
                          
                  
Robots!
                 
Lorem ipsum dolor sit amet
               
         
 

I want the caption to overlay on image but the way being done on Mashable.com

I have tried following but no luck :((

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

How can i overlay a caption div on top of image but just like Mashable.com ?

This works but I want it centered just like mashable. and centered for every image. for some images, it is not centered.

回答1:

You need to set the thumbnail class to position relative then the post-content to absolute.

Check this fiddle

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

Giving it top and left 0 will make it appear in the top left corner.

回答2:

Is this what you're after?

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

I added :text-align:center to the div and image

回答3:

Set the position to absolute; to move the caption area in the correct position

CSS

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

Bootply

回答4:

try the following example. Image overlay with text on image. demo

      
     
    
     
Robots!
     
Lorem ipsum dolor sit amet
      
   
 

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

转载请标明出处:Bootstrap 3: Text overlay on image

文章来源: Bootstrap 3: Text overlay on image

跳转到

• 问题:
• 回答1:
• 回答2:
• 回答3:
• 回答4:

Close