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＃main-aside-buddhaImgs li的底部属性更改为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/

div底部的不透明度背景没有正确附着

1 个答案: