css遮罩

本文转载自查看原文 2012-07-06 01:27 4433 css/html

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/cnblogs_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/cnblogs_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/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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css---遮罩层 css遮罩 mask属性 CSS遮罩mask css案例 - mask遮罩层的华丽写法 CSS3学习笔记（5）—页面遮罩效果特殊形状图片之遮罩蒙版CSS3-Mask效果 web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动解决css3遮罩层挡住下面元素事件的方法 css3绝对定位元素遮罩层不遮挡页面的处理方式通过css使用background-color为背景图添加遮罩效果