filter 属性详解
| 属性 | 名称 | 类型 | 说明 |
| grayscale | 灰度 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
| sepia | 褐色 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
| saturate | 饱和度 | 值为数值 | 默认是1，可以是小于1的小数，也可以大于1 |
| hue-rotate | 色相旋转 | 值为角度 | 0-360deg |
| invert | 反色 | 值为数值 | 取值范围从0到1的小数(包括0和1) /*IE10*/ |
| opacity | 透明度 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
| brightness | 亮度 | 值为数值 | 默认是1，可以小于1(变暗)，可以大于1(变亮) |
| contrast | 对比度 | 值为数字 | 默认是1，可以大于1，也可以小于1 |
| blur | 模糊 | 值为length | 表示模糊半径，比如filter:blur(2px)/*IE10*/ |
| drop-shadow | 阴影 | 值为shadow() | 写法类似css3 box-shadow，比如filter:drop-shadow(0,0,10px,black) |
特别说明：火狐、opera浏览器不支持filter属性所以在写定义常用属性的时候如：半透明属性：opacity，则可以直接定义成opacity:.5;/*Opera9.0+、Firefox1.5+、Safari、Chrome*/另外ie6也有特定的png图片定义方式：background:url(../images/yz.png) center bottom no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale,src=”images/yz.png”);_background:none;IE透明定义方式filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/
|
1.grayscale
div .f_grayscale {
filter: grayscale(50%);
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
-o-filter: grayscale(50%);
}
2.sepia
div .f_sepia {
filter:sepia(0.1);
-webkit-filter:sepia(0.1);
-moz-filter:sepia(0.9);
-ms-filter:sepia(0.9);
-o-filter:sepia(0.9);
}
3.saturate
div .f_saturate{
filter:saturate(125);
-webkit-filter:saturate(3);
-moz-filter:saturate(3);
-ms-filter:saturate(3);
-o-filter:saturate(3);
}
4.hue-rotate
div .f_hue-rotate{
filter:hue-rotate(300deg);
-webkit-filter:hue-rotate(300deg);
-moz-filter:hue-rotate(50deg);
-ms-filter:hue-rotate(50deg);
-o-filter:hue-rotate(50deg);
}
5.invert
<pre name="code" class="html">div .f_invert{
filter:invert(.3);
-webkit-filter:invert(.3);
-moz-filter:invert(.3);
-ms-filter:invert(.3);
-o-filter:invert(.3);
}
6.opacity
</pre></blockquote><pre name="code" class="html">div .f_opacity{
filter:opacity(.5);
-webkit-filter:opacity(.5);
-moz-filter:opacity(.5);
-ms-filter:opacity(.5);
-o-filter:opacity(.5);
}
7.brightness大于1的情况
</pre></blockquote><pre name="code" class="html">div .f_brightness{
filter:brightness(5);
-webkit-filter:brightness(5);
-moz-filter:brightness(1.3);
-ms-filter:brightness(1.3);
-o-filter:brightness(1.3);
}8.brightness小于1的情况
div .f_brightness{
filter:brightness(.3);
-webkit-filter:brightness(.3);
-moz-filter:brightness(.3);
-ms-filter:brightness(.3);
-o-filter:brightness(.3);
}9.contrast大于1
div .f_contrast{
filter:contrast(2);
-webkit-filter:contrast(2);
-moz-filter:contrast(2);
-ms-filter:contrast(2);
-o-filter:contrast(2);
}10.contrast小于1
div .f_contrast{
filter:contrast(.2);
-webkit-filter:contrast(.2);
-moz-filter:contrast(.2);
-ms-filter:contrast(.2);
-o-filter:contrast(.2);
}11.blur
div .f_blur{
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(2px);
-ms-filter:blur(2px);
-o-filter:blur(2px);
}12.drop-shadow
div .f_shadow{
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1));
-moz-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-ms-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-o-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
}
要实现（比方说）FireFox
24浏览器上照片变模糊的效果，也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的SVG文件：
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | <!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
04 | xmlns = "http://www.w3.org/2000/svg" |
05 | xmlns:xlink = "http://www.w3.org/1999/xlink" |
06 | xmlns:ev = "http://www.w3.org/2001/xml-events" |
10 | < feGaussianBlur stdDeviation = "10" /> |
如下CSS调用代码：
1 | filter: url (blur.svg#blur); /*
FireFox, Chrome, Opera */ |
完整的css代码
查看源代码打印帮助02 | filter: url (blur.svg#blur); /*
FireFox, Chrome, Opera */ |
04 | -webkit-filter:
blur( 10px ); /*
Chrome, Opera */ |
05 | -moz-filter:
blur( 10px ); |
06 | -ms-filter:
blur( 10px ); |
09 | filter:
progid:DXImageTransform.Microsoft.Blur(PixelRadius= 10 ,
MakeShadow=false); /*
IE6~IE9 */ |
本文转载自:
http://zzstudy.offcn.com/archives/8877 http://www.wufangbo.com/css3-mo-hu-xiao-guo/
