html - div 底部的不透明背景未正确附加

Question

我正在尝试创建一个可点击的图像，该图像的底部有文本，文本后面的背景设置为半不透明。在很多网站中很常见。除了在文本背景下方伸出图像长度的下唇外，我还有这个工作。它似乎来自包含图像和 anchor 的 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#main-aside-buddhaImgs li a span 的 bottom 属性更改为 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/