您的位置：首页 > Web前端 > CSS

css遮罩

2012-07-06 01:27 127 查看

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>

运行代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航