css - 画像内にテキストを含む 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;
}

maindiv #containerに aを指定し、必要に応じてプロパティを float にbackground-image配置div #contentしabsoluteて使用topしleftます。

ライブデモ

お役に立てれば。

#container div の高さと幅を auto に設定するように編集

更新されたデモ </p>