Bootstrap 在图片上叠加文字

Question

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

谢谢

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

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

Answer 2

我找到了答案。我错过了父 Div

的 Position = "relative"

CSS

在fixOverlayDiv中添加了classPosition = "relative"

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

Updated Fiddle Here

Bootstrap 在图片上叠加文字

Bootstrap Overlay Text on Image

html

css

overlay

twitter-bootstrap