图像上的引导覆盖文本[重复]

Question

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

我尝试过的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

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

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%； }