css 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

div .f_invert{ filter:invert(.3); -webkit-filter:invert(.3); -moz-filter:invert(.3); -ms-filter:invert(.3); -o-filter:invert(.3); } 

6.opacity

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的情况

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); } 

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

03	<svg version="1.1"

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"

07	baseProfile="full">

08

<defs>

09	<filter id="blur">

10	<feGaussianBlur stdDeviation="10" />

11

filter>

12

defs>

13

svg>

如下CSS调用代码：

1	filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

完整的css代码

查看源代码

打印
帮助

01

.blur {

02	filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

03

04	-webkit-filter: blur(10px); /* Chrome, Opera */

05	-moz-filter: blur(10px);

06	-ms-filter: blur(10px);

07	filter: blur(10px);

08

09	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

10

}





本文转载自:http://zzstudy.offcn.com/archives/8877

                  http://www.wufangbo.com/css3-mo-hu-xiao-guo/