CSS3毛玻璃

主要是给背景用filter:blur属性（要加上浏览器内核以兼容各种浏览器），背景虚化后，再对不用虚化的内容比如图片和文字，让他们定位到相应的位置。

1. .container{
2. width:650px;
3. height: 400px;
4. background: url(./images/background.jpg) fixed no-repeat;
5. position: relative;
6. }
7. .pic{
8. width:650px;
9. height: 400px;
10. background: inherit;
11. -webkit-filter:blur(5px);
12. -moz-filter:blur(5px);
13. -o-filter:blur(5px);
14. filter:blur(5px);
15. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
16. }
17. .weather{
18. width:80px;
19. height: 80px;
20. display: block;
21. position: absolute;
22. top:30%;
23. left:40%;
24. }
25. .text{
26. display: block;
27. position: absolute;
28. top:30%;
29. left:40%;
30. color:white;
31. font-size: 25px;
32. }

1. <div class=“container”>
2. <div class=“pic”></div>
3. <img src=“./images/a.jpg” alt=“” class=“weather”>
4. <span class=“text”>北京 晴 3-5C</span>
5. </div>

有的时候会看到这个filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6,   MakeShadow=false);   /*  IE6~IE9  */。这是代表要支持IE6~IE9。