簡體   English   中英

bootstrap,如何在div中的圖像上放置文本

[英]bootstrap, How to place text over image in a div

在此處輸入圖片說明 我有一個col-md-6 div,其中的圖像已經放置在div內,我需要在圖像中的徽標下方專門放置一些文本。 每次嘗試都會將其放置在圖片下方,請提供幫助。 我還沒有CSS

 <div class=".container-fluid"> <div class="set7"> <div class="row"> <div class="col-md-6 text-center"> <img src="images/dpfront1.png"> <h6>Copyright &copy; 2016 DepotSquare.All Rights Reserved. </h6> </div> </div> <div class="col-md-6">.col-md-6</div> </div> </div> </div> 

這就是你想要的嗎?

 .image { position: relative; width: 100%; /* for IE 6 */ } #img_head { position: absolute; //top: 10px; left: 0; width: 100%; } 
 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class=".container-fluid"> <div class="set7"> <div class="row text-center"> <div class="col-md-6 text-center image"> <img src="http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png"> <div class="col-md-6" id="img_head">.col-md-6 <br /> <h6>Copyright &copy; 2016 DepotSquare.All Rights Reserved. </h6> </div> </div> </div> </div> </div> </div> 

.col-md-6替換為所需的任何文本。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM