引導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>