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光照射一样