CSS3毛玻璃

当前位置：首页
» 教程文章 » CSS3毛玻璃

Ubar 暂无评论阅读 2,136 次

主要是给背景用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光照射一样