css - 使用文本大小在 CSS 中自动增长背景

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 添​​加最小高度，但这不起作用。

任何帮助都会很棒，谢谢

Answer 1

从 .imgBackground CSS 类中删除 bottom:0

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

同时删除这些属性

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

JS Fiddle Demo