Bootstrap如何在背景图像上添加文本？

Question

我正在努力实现类似

的目标

<div class="row">
       <div class="col-md-8 col-md-offset-2">
       <div class="background">
         <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" class="img-responsive">
       </div>
         <div class="bg-text">
           <h2>testing</h2>
            <h2>Text</h2>
         </div>
       </div>
     </div>

我无法正确应用CSS，因此它也能在小屏幕上保持响应。

感谢帮助。

Answer 1

html,body{
  width:100%;
  height:100%;
}
.bigger{
  width:100%;
  height:200px;
  background-image:url('http://images.financialexpress.com/2015/12/Lead-image.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}
.smaller{
  width:100%;
  height:50px;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  bottom:0;
  text-align:center;
  color:white;
}

<div class="bigger">
  <div class="smaller">Text Here</div>
</div>