前两天在网上看到有个用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光照射一样