HTML と CSS を使用してこの画像を再現しようとしていますが、画像の上の半透明の div にソリッド画像を配置する方法がわかりません。上と下に1つずつあります。そして、これらのテーブルが必要です。
http://dl.dropbox.com/u/17949100/house.png
コメントへの応答:<table>
すべての div を強制的に同じ幅 (および画像) にする私の怠惰な方法です。div からテキストを取り出して配置する必要があると思いますが、これも苦労しました。次に、ブラウザのサイズを変更するかどうか心配しました。
jsFiddleでこれまでに得たものは次のとおりです。HTMLコードは次のとおりです。
<table><tr><td>
<img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
<div class="address"><p class="address">804 Rolfe</p></div>
<div class='desc'>
<span class='l'>2 Bedrooms</span>
<span class='r'>$2100</span>
</div>
</td></tr></table>
CSSファイルは次のとおりです。
div.address {
width:100%;
height:20px;
background-color:#000000;
opacity:0.5;
}
span.l{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:left;
margin-top:0px;
}
span.r{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:right;
margin-top:0px;
}
div.desc {
width:100%;
height:20px;
background-color:#000000;
opacity:0.5;
}
p.address{
font-family:Helvetica;
height:20px;
opacity:1;
color:#FFFFFF;
text-align:center;
}