引导3 CSS图象字幕叠加

Question

我使用自举和具有问题在图像上叠加字幕，字幕DIV只是不能配合在盒中，如下所示：

HTML：

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"> 
     <img src="images/upload/projects/21/cake.png" class="img-responsive" alt=""> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div> 
    </a> 
</div> 

CSS：

div.desc{ 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

SOLUTION：

由于@himanshu来解决这个问题。

div.desc{ 
    background-color: #000; 
    bottom: 0; 
    color: #fff; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    width: 100%; 
} 

.fix{ 
    width: 100%; 
    padding: 0px; 
} 

Answer 1

我认为问题出在位置而不是叠加，div.desc是绝对的，形象是它的兄弟。因此覆盖图不会跟随图片，它只会跟随锚标签或您的div.wrapper。

从我所看到的是，在图像或填充锚或包装上有一个边距。

最好的解决方案是将desc和图像放在另一个div中，使用0填充的宽度为100％。

<div class="col-sm-4 wrapper"> 
    <a href="#"> 
<div class="fix"> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> 
     <div class="desc"> 
      <p class="desc_content">The pack, the basic unit of wolf social life.</p> 
     </div></div> 
    </a> 
</div> 

CSS：

.fix{width:100%; padding:0px;} 

Answer 2

使用此属性div.desc类

div.desc{ 
    position: absolute; 
    bottom: 0; 
    background-color: #000; 
    color: #fff; 
    opacity: 0.5; 
    left:0; /** new **/ 
    right:0; /** new **/ 
    filter: alpha(opacity=50); 
} 

Answer 3

试试这个

<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 
<div class="wrapper"> 
    <div class=""> 
     <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" > 
    </div> 
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div> 
</div> 

CSS

div.desc_content { 
background-color: #000; 
color: #FFF; 
font: bold 11px verdana; 
padding-left: 10px; 
padding-top: 7px; 
height: 23px; opacity: 0.7; 
position: relative; 
top: -30px; 
} 
div.wrapper{ 
    float: left; 
    position: relative; 
    margin: 10px; 
} 

Answer 4

对于其他人试图覆盖在引导图像上以字幕，可以考虑使用旋转木马字幕。

在这里看到：http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

<div class="carousel-caption"> 
    <h3>Chania</h3> 
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
    </div>