在html中创建一个可以覆盖全页面的透明层 并且里边有内容

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 2 <html>

 3  <head>

 4   <title> New Document </title>

 5   <meta charset="UTF-8">

 6   <meta name="Generator" content="EditPlus">

 7   <meta name="Author" content="">

 8   <meta name="Keywords" content="">

 9   <meta name="Description" content="">

10   <link rel="stylesheet" type="text/css" href="">

11   <style type="text/css">

12     body{position:relative;}

13     .inner{}

14     .divone{width:500px;height:500px;background:red;}

15     .ceng{position:absolute;top:0px;bottom:0px;width:100%;height:100%;}

16     .bg{width:100%;height:100%;

17     /**透明层兼容**/

18     filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3;opacity: 0.3;

19     background-color:black;z-index:0;position:absolute;}

20     .nr{border:1px solid red;width:500px;height:300px;margin:100px auto 0px;background:#fff;z-index:1000;position:relative;}

21     .nr div{position:absolute;}

22   </style>

23  </head>

24 

25  <body>

26     <div class="inner">

27       <div class="divone"></div>    <!--body里的内容-->

28       <div class="ceng">            <!--覆盖的层-->

29         <div class="bg"></div>        <!--层内的透明背景-->

30         <div class="nr">            <!--层内的内容-->

31             <div>12312312312312</div>

32         </div>

33       </div>

34      </div>

35  </body>

36 </html>

--------------------------------------------------------分割线-------------------------------------------------------------------------

兼容所有浏览器的透明度设置

.aaa{filter:alpha(opacity=50);   

      -moz-opacity:0.5;   

      -khtml-opacity: 0.5;   

      opacity: 0.5;}  

你可能感兴趣的:(html)