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 hover遮罩層 CSS實現遮罩效果 css---遮罩層 css遮罩 mask屬性 CSS遮罩mask [轉]CSS遮罩——如何在CSS中使用遮罩 CSS遮罩層簡易寫法 CSS 實現遮罩層彈窗效果