布局基础--半透明标题

结构

<div class="imgitem"><a href="#"><img src="image/02.jpg" /></a>
  <div class="imgitem_downbg"></div>
  <div class="imgitem_title"><a href="#">此处显示标题的内容</a></div>
</div>

样式

.imgitem {
 position: relative;
}
.imgitem img {
 height: 100px;
 width: 120px;
 display: block;
}
.imgitem_downbg {
 height: 20px;
 width: 120px;
 position: absolute;
 left: 0px;
 bottom: 0px;
 background-color: #333333;
 -moz-opacity:.50;
 filter:alpha(opacity=50);
 opacity:.50;
}
.imgitem_title {
 line-height: 20px;
 text-align: center;
 height: 20px;
 width: 120px;
 position: absolute;
 left: 0px;
 bottom: 6px;
}
.imgitem_title a {
 font-size: 12px;
 color: #FFFFFF;
 text-decoration: none;
}
.imgitem_title a:hover {
 text-decoration: underline;
}