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{350px; height:350px; position:relative; overflow:hidden; margin:0px auto 60px;} .test1_mask{ position:absolute; top:0px; left:0px; 350px; height:350px; background:url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_aa.png) no-repeat; z-index:999;} #test2{400px; height:260px; position:relative; overflow:hidden; margin:0px auto 60px;} .test2_trans{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; 400px; height:260px; background:url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_bb.png) no-repeat; z-index:999;} #test3{350px; height:500px;position:relative; overflow:hidden; margin:0px auto 60px;} .test3_mask{ position:absolute; top:0px; left:0px; 350px; height:500px; background:url(http://images.cnblogs.com/cnblogs_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/cnblogs_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/cnblogs_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/cnblogs_com/kuikui/354173/r_test7.jpg" /></div> </div> </body> </html>

相关阅读:
Python初学者第十天集合、十六进制
Python初学者第九天字符串、列表、字典练习
Python初学者第八天元组和字典
Python初学者第七天字符串及简单操作
Python初学者第六天列表操作练习
Python初学者第五天列表及简单操作
Python初学者第四天二进制运转换
Python初学者第三天运算符、while循环
Python初学者第二天用户输入和注释
Python初学者第一天 Python安装及第一个Python程序

原文地址：https://www.cnblogs.com/kuikui/p/2578700.html