css遮罩 - 爱码网

css遮罩
图片采用形状透明的（alpha透明度），图片格式为png8。备注：IE6仅支持100%。
使用position定位。父容器relative，子容器absolute。
带形状遮罩层带颜色透明层内容层
mask opacity content

有机的结合会美化网站。

示例效果图如下：

<!DOCTYPE html> <html> <head> <title>css遮罩</title> <style type="text/css"> *{margin:0px;padding:0px;} body{background:#FFFFFF;} #test1{width:350px; height:350px; position:relative; overflow:hidden; margin:0px auto 60px;} .test1_mask{ position:absolute; top:0px; left:0px; width:350px; height:350px; background:url(http://images.cnblogs.com/likecs_com/kuikui/354173/r_aa.png) no-repeat; z-index:999;} #test2{width:400px; height:260px; position:relative; overflow:hidden; margin:0px auto 60px;} .test2_trans{width:400px; height:260px; background:#FF0000;opacity:0.5;filter:alpha(opacity=50); z-index:99;position:absolute;top:0px;left:0px;} .test2_mask{ position:absolute; top:0px; left:0px; width:400px; height:260px; background:url(http://images.cnblogs.com/likecs_com/kuikui/354173/r_bb.png) no-repeat; z-index:999;} #test3{width:350px; height:500px;position:relative; overflow:hidden; margin:0px auto 60px;} .test3_mask{ position:absolute; top:0px; left:0px; width:350px; height:500px; background:url(http://images.cnblogs.com/likecs_com/kuikui/354173/r_cc.png) bottom center no-repeat; z-index:999;} </style> </head> <body> <div id="test1"> <div class="test1_mask" ></div> <div class="test1_cont"><img alt="" width="350px" height="350px" src="http://images.cnblogs.com/likecs_com/kuikui/354173/r_test7.jpg" /></div> </div> <div id="test2"> <div class="test2_mask" ></div> <div class="test2_trans"></div> <div class="test2_cont"><img alt="" width="400px" height="260px" src="http://images.cnblogs.com/likecs_com/kuikui/354173/r_test7.jpg" /></div> </div> <div id="test3"> <div class="test3_mask"></div> <div class="test3_cont"><img alt="" width="350px" height="500px" src="http://images.cnblogs.com/likecs_com/kuikui/354173/r_test7.jpg" /></div> </div> </body> </html>