0

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;
}
4

4 に答える 4

2

マークアップをクリーンアップし、CSS をリファクタリングしたフィドル: http://jsfiddle.net/32szC/4/

とにかく、レイアウトの目的でテーブルを使用しないという提案を真剣display: inline-blockに検討してください。そのため、.wrapper要素を使用してテーブル構造をまったく削除することを選択した場合でも、css が機能するようにしました ( http://jsfiddle.net/32szC/7/を参照)。 )

HTML

 <table>
 <tr><td>
     <div class="wrapper">
         <img src="http://dl.dropbox.com/u/17949100/samplehouse.png" />
         <div class="address"><span class="address">804 Rolfe</span></div>
         <div class='desc'><span>2 Bedrooms</span><span>$2100</span></div>
    </div>
 </td></tr></table>

CSS

.wrapper {
    position: relative;
    height: 100%;
}
.wrapper div {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    background: rgba(0,0,0, .75);
    height:20px;
}

div.address { top: 0; }
div.desc { bottom: 0; }

span {
    font-family: Helvetica;
    text-align:center;
    font-size:75%;
    color: #fff;
    height: 20px;
    line-height:20px;
}

.address span {
   display: block;
}

.desc span {
    width:50%;   
    float: left;
}
.desc span + span {
    float:right;
}
于 2013-03-28T16:06:06.543 に答える
2

これが私の試みです。画像の周りに影の境界線が含まれています: http://jsfiddle.net/katychuang/2R3hk/

div を使用するためにテーブルを削除しました。外側のクラスは「アイテム」

<div class="item">
  <div class="address">
      <span>804 Rolfe</span>
  </div>
    <img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
   <div class='desc'><span class='l'>2 Bedrooms</span><span class='r'>$2100</span></div>
</div>

そしてCSS。100% を使用するのではなく、.item と .item img の幅を個別に指定して並べるとよいでしょう。

.address {  
    height:20px;
    width:inherit;
    background: rgba(0, 0, 0, 0.70);
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    z-index:500;
    position:absolute;
    top:0px;
    left:0px;
    padding-top:5px;
}

span.l{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:left; 
}
span.r{
    width:50%;
    font-family:Helvetica;
    color:#FFFFFF;
    text-align:center;
    font-size:75%;
    float:right; 
}

.desc { 
    width: inherit;
    background: rgba(0, 0, 0, 0.70);              
    height: 20px;
    z-index: 500;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 5px;
}

.item img {width:250px}

.item {
  position:relative;
  width: 250px;
  margin: auto;
  padding: 0px;
  -moz-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Saf3.0+, Chrome */
        box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Opera 10.5, IE 9.0 */
      filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888')"; /* IE8 */
}

body {background-color:#EEEEEE;}
于 2013-03-28T16:13:54.120 に答える
2

あなたがすべきことの私の解釈は次のとおりです。

http://jsfiddle.net/32szC/8/

HTML:

<div class="product">
    <img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
    <span class="address">804 Rolfe</span>
    <div class='desc'>
        <span class='left'>2 Bedrooms</span>
        <span class='right'>$2100</span>
    </div>
</div>

CSS:

.product {
    width: 272px;
    height: 220px;
    position: relative;
}

.product img {
    position: relative;
    z-index:1;
}

.address, .desc { 
    display: block;
    width: 252px; /* 272px */
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba( 0, 0, 0, 0.5);
    color: #fff;
}

.desc { 
    top: auto;
    bottom: 0;
    overflow: hidden;
}

.desc .left {
    float: left;
}

.desc .right {
    float: right;
}
于 2013-03-28T16:16:06.427 に答える
1

負のマージンが必要なようです。画像の上にアドレスを配置し、その下に説明を配置します。margin-bottom: -20px次に、画像の上に住所を重ねるのと同じくらい簡単なことです。

ここで適切な変更を加えましたjsFiddle

于 2013-03-28T16:09:39.573 に答える