图像上的Bootstrap叠加文字

Question

我正在尝试使用Bootstrap在Image上显示叠加文本。我审阅了Stack Overflow Question and Answer。但Overlay不适合Image。我不知道我在那个答案中错过了什么

我尝试了Fiddle Here

谢谢

HTML

<div class="container">
   <div id="DivOurProducts" class="row">
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/1">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/2">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/3">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/4">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
    </div>
    </div>

CSS

.fixOverlayDiv{
    width:100%; 
    padding:0px;
}
.OverlayText{
     background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

Answer 1

我找到了答案。我错过了{Parent}的Position = "relative"

<强> CSS

在fixOverlayDiv类中添加了Position = "relative"

.fixOverlayDiv{
 position: relative;
 width:100%; 
 padding:0px;
}

Updated Fiddle Here

Answer 2

是否要将css类更改为.OverlayText {     背景色：＃000;     底部：20％;
    颜色：#fff;     左：25％;     不透明度：0.5;     位置：绝对;     宽度：50％; }