css - 在图像中创建一个带有文本的 div。（响应式设计）

Question

我想创建一个包含图像和文本的 div。类似于http://wearyoubelong.com/的东西我该怎么做呢？我正在使用 Zerb 基础框架。到目前为止，我已经尝试在文本上使用 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;
}

只是给了 main div #containera background-image，定位div #content到absolute然后使用top和left属性根据您的需要浮动它。

现场演示

希望这可以帮助。

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

更新演示 ​</p>