html如何清除模糊效果,html 实现模糊效果

CSS中filter属性

filter:filtername(fparameter1, fparameter2...)

滤镜说明：

Alpha：设置透明层次

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

Chroma：制作专用颜色透明

DropShadow：创建对象的固定影子

FlipH：创建水平镜像图片

FlipV：创建垂直镜像图片

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

gray：把图片灰度化

invert：反色

light：创建光源在对象上

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

shadow：创建偏移固定影子

wave：波纹效果

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

1、滤镜：Alpha   "filter:Alpha(Opacity=opacity)         Opacity：起始值，取值为0～100, 0为透明，100为原图。

2、滤镜：blur   ilter:Blur(Add = add, Direction = direction, Strength = strength)     Add：一般为1，或0。Direction：角度，0～315度，步长为45度。Strength：效果增长的数值，一般5即可。

3、滤镜：Chroma  filter:Chroma(Color = color)

4、滤镜：DropShadow   filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)     Offx：X轴偏离值。Offy：Y轴偏离值。

5、滤镜：shadow     filter:Shadow(Color=color, Direction=direction)   Direction：角度，0－315度，步长为45度。

6.颜色变化   filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

.......

eg:

Html 模糊效果

.box{

margin:0 auto;

}

.box img{

width:200px;

height:200px;

}

.f1{

float:left;

}

.f2{

float:left;

padding-left:20px;

}

.grayscale{

filter:alpha(grayscale=50);

}

.opacity{

opacity:0.4;

filter:alpha(opacity=40)i;

}

.opacity:hover{

opacity:1.0;

filter:alpha(opacity=100 );

}

原图

grayscale

opacity