Question

我从来没有强大的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中添加一个min-height，但这不起作用。

任何帮助都会很棒，谢谢

Answer 1

从bottom:0 css类

中删除.imgBackground

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

同时删除这些属性

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

JS Fiddle Demo

Answer 2

试试这个：

.imgText
    {
    color: White;
    font-size: 24px;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 10px;
    vertical-align: middle;
    }

Answer 3

确定排序，我读到了底部：0到imgBackground然后删除了绝对和底部：0来自imgText并且现在工作得很好!!感谢

自动增长CSS与文本大小背景

3 个答案: