（CSS）如何在没有绝对定位的情况下将文本（带有背景颜色）放在<img/>标签上

Question

正如标题所说

我的代码是这样的：

<div class=container> <img/> <div>some text with line one, line two , line three </div> </div>

容器应该有溢出：隐藏，我的文本将在多行中，所以我只需要将一小部分文本显示在容器的底部，因此当用户悬停时，会出现全文。 / p>

我希望将文本放在img上，而不是绝对定位。 我尝试了负边距，但文字中没有BG颜色。 也试过相对pos。 =＆GT;在IE上工作得很好，但没有机会。

这是我想要的图像

Answer 1

position:relative解决了您的问题

Answer 2

我认为没有理由不使用position: absolute。

请参阅： http://jsfiddle.net/NeaR4/

<强> CSS：

.container {
    border: 2px dashed #444;
    float: left;
    position: relative
}
.container img {
    display: block
}
.container > div {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 14px;
    background: #000;
    background: rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
    font: bold 14px Arial, sans-serif;
    padding: 5px;
}
.container:hover > div {
    height: auto
}

<强> HTML：

<div class="container">
    <img src="http://dummyimage.com/230x180/f0f/fff" />
    <div>some text with line oneeee, line twoooooooo ooooooo , line three</div>
</div>