如何在网页图片上面叠加透明的文字层

我在做个人站点 我爱购物网 时 需要实现图片上面可以叠加文字层，实现这种效果其实只需要通过CSS即可实现。

 

像这种效果的话HTML大概如下：

<div class="main_top_sell"> <div class="other_info"> </div> <a href="http://www.52gou5.com/product/show/156" target="_blank" class="show_link"><img class="show" src="http://img01.taobaocdn.com/bao/uploaded/i1/T19pCaXXFpXXbNs4Z3_050320.jpg_250x250.jpg" /></a> <div class="product_title"> <a href="http://www.52gou5.com/product/show/156" target="_blank">as安都2011夏新领口花边褶皱无袖碎花连衣裙9113226h限</a> </div> <div class="sell_price"> <span>108</span> 已售出:<div class="price_sold">90</div>件 </div> <div class="go"><a href="http://www.52gou5.com/product/show/156" target="_blank"></a></div> </div>

 

CSS的内容如下：

.main_top_sell{ background:url(../images/sell_bg.gif) no-repeat; float:left; width:230px; height:252px; margin:20px 0 0 15px;position:relative;} .main_top_sell img.show{ width:200px; height:200px; padding:2px 0 0 8px;} .main_top_sell .show_link {z-index:500; position:absolute;} .main_top_sell .product_title { z-index:600; background-color:#000; text-align:center; font-size:12px; font-weight:bold; width:216px; position:absolute;bottom:48px; filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6; height:40px; } /*.main_top_sell .product_title:hover{ background-color:#777;} */ .main_top_sell .product_title a{ color:#fff; text-decoration:none; line-height:1.5;filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;} .main_top_sell .product_title a:hover{ color:#ccc;}

 

 

我们来讲解一下css里面的主要事项。

1、最外面包内容的DIV main_top_sell需要设置为position:relative，使得其里面的内容可以使用绝对定位。

2、product_title 商品标题设置为position:absolute;然后bottom:48px;使其定位到main_top_sell的底部

3、为了使product_title商品标题实现半透明效果，需要增加filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6;这几个参数可以保证在各个浏览器下面，文字层都是半透明效果。