0

I am trying to reproduce this image, with HTML and CSS, but I'm not sure how to place solid images on translucent divs on top of an image. There's one up top and on bottom. And I need a table of these.

http://dl.dropbox.com/u/17949100/house.png

Response to comment: <table> is my lazy way of forcing all the divs to be the same width (and the image). I guess I need to take the text out of the divs and place them, which I also had a hard time doing. Then I worried if use resizes the browser.

Here's what I got so far on jsFiddle. Here's the HTML code:

<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>

Here's the CSS file:

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

这是我的尝试，它包括图像周围的阴影边框：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。最好为 .item 和 .item img 指定单独的宽度，以使它们对齐而不是使用 100%

.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 回答
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 回答
1

看起来你只需要一些负边距。我会将地址放在图像上方，将描述放在图像下方。然后像margin-bottom: -20px将地址重叠在图像上一样简单的东西。

我在这里做了适当的改变jsFiddle

于 2013-03-28T16:09:39.573 回答