首页 > 技术文章 > 用css做半透明遮罩层

miaoxiaojiao 2017-08-31 16:55 原文

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>半透明(用在遮罩层)</title>
 6 <style type="text/css">
 7  *{ margin:0; padding:0;}
 8  
 9  #maskLayer{ width:30%; height:200px; background-color:#000000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);}
10  
11  #div1{ width:100px; height:100px; background:red; }
12 </style>
13 
14 </head>
15 <body>
16 
17 <div id="maskLayer">
18    <div id="div1">div1</div>
19 </div>
20 
21 </body>
22 </html>     

 

推荐阅读