结构 <div class="imgitem"><a href="#" mce_href="#"><img src="image/02.jpg" mce_src="image/02.jpg" /></a> <div class="imgitem_downbg"></div> <div class="imgitem_title"><a href="#" mce_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; }