Question

我正在尝试使用HTML和CSS重现此图像，但我不确定如何在图像顶部的半透明div上放置实体图像。顶部和底部有一个。我需要一张这些表。

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

对评论的回应：<table>是我迫使所有div都具有相同宽度（和图像）的懒惰方式。我想我需要把div的文字 out 放到它们身上，我也很难做。然后我担心如果使用调整浏览器的大小。

这是我到目前为止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;
}

Answer 1

标记清理和css重构的小提琴：http://jsfiddle.net/32szC/4/

无论如何，认真考虑不使用表格用于布局目的的建议：所以即使你选择使用display: inline-block上的.wrapper删除表结构，我也使css工作了<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>元素（请参阅http://jsfiddle.net/32szC/7/）

<强> HTML

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

<强> CSS

{{1}}

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

Answer 3

以下是我对你应该做的事情的解释：

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

Answer 4

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

我在jsFiddle

进行了相应的更改

透明div上的纯文本图像

4 个答案: