在图像内创建带文本的div。 （响应式设计）

Question

我想创建一个包含图像和文本的div。与http://wearyoubelong.com/类似的东西我该怎么做呢？我正在使用Zerb Foundation Framework。截至目前，我已尝试在文本中使用position：absolute，但这似乎在很多地方都有所突破。你能告诉我如何解决这个问题吗？

Answer 1

假设您有一个类似HTML的示例

<强> HTML

<div id="container">
<div id="content">
    <h1>Here goes some content</h1>
    <p>Description about the product.
    Some more desription about the product.</p>
</div>
</div>​

<强> CSS

#container
{
    background-image:url('http://image.made-in-china.com/2f0j00cZjaqNvWlEks/Men-T-Shirt.jpg');
    background-repeat:no-repeat;
    height:400px;
    width:400px;
}

#content
{
    position:absolute;
    height:auto;
    width:auto;
    top:150px;
    left:100px;
}
#content h1
{
   color:Yellow;
   font-weight:bold;
   font-size:22px;
}

#content p
{
    color:Red;
}

刚刚给主div #container一个background-image，将div #content定位到absolute，然后使用top和left属性根据您的需要浮动它。

<强> Live Demo

希望这有帮助。

编辑将#container div的高度和宽度设置为自动

<强> Updated Demo