CSS3毛玻璃

前两天在网上看到有个用css做的毛玻璃效果，好喜欢，就仿着做了个demo。

有很多这种效果直接用的ps弄得图片。但css3也可以直接做出这种效果，给人一种层次感，背景虚化，让重点放前面。


demo的地址：

http://7.ghostbuttons.applinzi.com/mbl/test.html

http://7.ghostbuttons.applinzi.com/mbl/4.html

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

.container{
width:650px;
height: 400px;
background: url(./images/background.jpg) fixed no-repeat;
position: relative;
}
.pic{
width:650px;
height: 400px;
background: inherit;
-webkit-filter:blur(5px);
-moz-filter:blur(5px);
-o-filter:blur(5px);
filter:blur(5px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
}
.weather{
width:80px;
height: 80px;
display: block;
position: absolute;
top:30%;
left:40%;
}
.text{
display: block;
position: absolute;
top:30%;
left:40%;
color:white;
font-size: 25px;
}

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

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

滤镜说明：

　　Alpha：设置透明层次

　　blur：创建高速度移动效果，即模糊效果

　　Chroma：制作专用颜色透明

　　DropShadow：创建对象的固定影子

　　FlipH：创建水平镜像图片

　　FlipV：创建垂直镜像图片

　　glow：加光辉在附近对象的边外

　　gray：把图片灰度化

　　invert：反色

　　light：创建光源在对象上

　　mask：创建透明掩膜在对象上

　　shadow：创建偏移固定影子

　　wave：波纹效果

　　Xray：使对象变得像被x光照射一样