bootstrap,如何将文本放在div中的图像上

时间:2016-05-04 15:43:19

标签: html css twitter-bootstrap bots

enter image description here我有一个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>

1 个答案:

答案 0 :(得分:0)

这是你想要的吗?

&#13;
&#13;
.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}
#img_head {
  position: absolute;
  //top: 10px; 
  left: 0;
  width: 100%;
}
&#13;
<!-- 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>
&#13;
&#13;
&#13;

.col-md-6替换为您想要的任何文字。