参考:
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