【html】【16】高级篇--毛玻璃效果[模糊]

参考:

http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/

下载:

http://download.csdn.net/detail/a393464140/7105685

效果:

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>

 

ok

 

posted @ 2015-12-12 16:22  阿亮的笔记  阅读(2195)  评论(0)  编辑  收藏  举报