0

我从来没有在 CSS 上很强大，所以希望有人能解决这个小问题。

所以我有一个图像，我在底部添加了一个不透明的黑色背景，然后在背景中添加了文本。它适用于 1 行，但当标题文本翻转时它不会自动增长。

这是我的 HTML：

<div class="image">
        <img src="images/MayorMaking.jpg" alt="" />
        <div class="imgBackground">
            <div class="imgText">
                This is a really long text sentence that goes over 2 lines, what you think will happen?
            </div>
        </div>
</div>

和我的 CSS：

<style type="text/css">
    .image { 
        position: relative; 
        width: 480px; /* for IE 6 */
    }

    .imgBackground  
    {
        position:absolute;
        bottom: 0;
        min-height: 50px;
        width: 100%;
        background: rgb(0, 0, 0); /* fallback color */
        background: rgba(0, 0, 0, 0.7);
    }
    .imgText
    {
        position: absolute;
        bottom: 0;
        color: White;
        font-size: 24px;
        font-weight: bold;
        padding-left: 5px;
        padding-top: 10px;
        vertical-align: middle;
    }

</style>

如您所见，我尝试向 .imgBackground 添​​加最小高度，但这不起作用。

任何帮助都会很棒，谢谢

4

3 回答 3

1

bottom:0从.imgBackgroundCSS 类中删除

.imgBackground {
position: absolute;
/*bottom: 0;*/
}

也删除这些属性

.imgText
{
    /*position: absolute;
    bottom: 0;*/
}

JS 小提琴演示

于 2013-05-27T11:41:07.483 回答
0

试试这个：

.imgText
    {
    color: White;
    font-size: 24px;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 10px;
    vertical-align: middle;
    }
于 2013-05-27T11:51:04.133 回答
0

好的排序，我将 bottom: 0 读取到 imgBackground 然后从 imgText 中删除了 absolute 和 bottom: 0 并且现在工作得很好！谢谢

于 2013-05-27T12:01:11.647 回答