在底部的不透明背景不正確附着

Question

我正在嘗試創建一個可點擊的圖像，其中有文字背景設置爲半透明背景底部運行。在很多網站中很常見。我有這個工作，而不是底部的嘴脣運行的圖像長度戳文字背景下面。它似乎來自包含圖像和錨點的li。我在網上搜索並嘗試了幾種方法將其刪除，但沒有任何成功。

如何獲取我的文本的背景顏色以適合我的圖像底部？

<ul id='main-aside-buddhaImgs'> 
    <li> 
     <div class='titleCont'> 
      <a href='#'><img src='images/squarebuddha.jpg' alt='budda' height='120' width='120'/> 
       <span>title</span> 
      </a> 
     </div> 
    </li> 

ul#main-aside-buddhaImgs { 
    float:left; 
} 

ul#main-aside-buddhaImgs li { 
    float:left; 
    padding:12px 15px; 
} 

ul#main-aside-buddhaImgs li div.titleCont { 
    position:relative; 
} 

ul#main-aside-buddhaImgs li a { 
    display:block; 
} 

ul#main-aside-buddhaImgs li a span{ 
    display:block; 
    position: absolute; 
    bottom: 0; 
    left:0; 
    width:100%; 
    color:#fc6; 
    text-align: center; 
    line-height: 30px; 
    background: #300; 
    background: rgba(51,0,0,.5); 
} 

Answer 1

更改底部屬性爲UL＃主一邊，buddhaImgs李跨度到4PX

ul#main-aside-buddhaImgs li a span{ 
    display:block; 
    position: absolute; 
    bottom: 4px; 
    left:0; 
    width:100%; 
    color:#fc6; 
    text-align: center; 
    line-height: 30px; 
    background: #300; 
    background: rgba(51,0,0,.5); 
} 

http://jsfiddle.net/Kr5QP/