HTML 之毛玻璃效果

效果:

HTML 之毛玻璃效果

css

 1 .bg{
 2   background-image: url("cat.jpg");    /* 背景图 */
 3   
 4   background-position: center bottom;   /* 背景样式 */
 5   background-attachment: fixed;
 6   background-size: cover;
 7   height: 100%;
 8   font-size: 100%;
 9 }
10 .glass{
11   position: relative;                    /* 玻璃样式 */
12   padding: 0;
13   border-bottom: 1px solid;
14   border-bottom-color: #ccc;
15   border-bottom-color: rgba(255, 255, 255, 0.2);
16   background-color: rgba(255, 255, 255, 0.2);
17   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
18   
19   margin-left:100px;                     /* 玻璃图层 偏移&大小 */
20   margin-top:50px;
21   height: 500px;
22   width: 800px;
23 }
24 .blur {    
25   background-image: url("cat.jpg");    /* 背景图 */
26 
27   height:500px;                         /* 模糊图层大小 */
28   width: 800px;
29   
30   position: relative;                   /* 模糊图层样式 */
31   padding: 0;
32   background-position: center bottom;
33   background-attachment: fixed;
34   background-size: cover;
35   font-size: 100%;
36   
37   /* 模糊滤镜 */
38     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
39     
40     -webkit-filter: blur(10px); /* Chrome, Opera */
41        -moz-filter: blur(10px);
42         -ms-filter: blur(10px);    
43             filter: blur(10px);
44     
45     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
46 }

html

 1 <head>
 2 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 3 <title>Glass Cat</title>
 4 <link rel="stylesheet" type="text/css" href="glass-cat.css" >
 5 </head>
 6 <body class="bg">
 7 
 8 <div id="glass" class="glass">
 9 <div id="blur" class="blur"></div>
10 </div>
11 </body>
12 </html>

利用margin属性将一个div水平居中

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 3 <html> 
 4 <head> 
 5 <title>My JSP 'margin.jsp' starting page</title> 
 6 <style> 
 7 div{ 
 8 height:100px; 
 9 width:1002px; 
10 background:yellow; 
11 margin:0px auto; 
12 } 
13 </style> 
14 </head> 
15 <body> 
16 <div></div> 
17 </body> 
18 </html>