css filter详解

css filter详解

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

1. div .f_grayscale {
2. filter: grayscale(50%);
3. -webkit-filter: grayscale(50%);
4. -moz-filter: grayscale(50%);
5. -ms-filter: grayscale(50%);
6. -o-filter: grayscale(50%);
7. }

2.sepia

1. div .f_sepia {
2. filter:sepia(0.1);
3. -webkit-filter:sepia(0.1);
4. -moz-filter:sepia(0.9);
5. -ms-filter:sepia(0.9);
6. -o-filter:sepia(0.9);
7. }

3.saturate

1. div .f_saturate{
2. filter:saturate(125);
3. -webkit-filter:saturate(3);
4. -moz-filter:saturate(3);
5. -ms-filter:saturate(3);
6. -o-filter:saturate(3);
7. }

4.hue-rotate

1. div .f_hue-rotate{
2. filter:hue-rotate(300deg);
3. -webkit-filter:hue-rotate(300deg);
4. -moz-filter:hue-rotate(50deg);
5. -ms-filter:hue-rotate(50deg);
6. -o-filter:hue-rotate(50deg);
7. }

5.invert

1. div .f_invert{
2. filter:invert(.3);
3. -webkit-filter:invert(.3);
4. -moz-filter:invert(.3);
5. -ms-filter:invert(.3);
6. -o-filter:invert(.3);
7. }

6.opacity

1. div .f_opacity{
2. filter:opacity(.5);
3. -webkit-filter:opacity(.5);
4. -moz-filter:opacity(.5);
5. -ms-filter:opacity(.5);
6. -o-filter:opacity(.5);
7. }

7.brightness大于1的情况

1. div .f_brightness{
2. filter:brightness(5);
3. -webkit-filter:brightness(5);
4. -moz-filter:brightness(1.3);
5. -ms-filter:brightness(1.3);
6. -o-filter:brightness(1.3);
7. }

8.brightness小于1的情况

1. div .f_brightness{
2. filter:brightness(.3);
3. -webkit-filter:brightness(.3);
4. -moz-filter:brightness(.3);
5. -ms-filter:brightness(.3);
6. -o-filter:brightness(.3);
7. }

9.contrast大于1

1. div .f_contrast{
2. filter:contrast(2);
3. -webkit-filter:contrast(2);
4. -moz-filter:contrast(2);
5. -ms-filter:contrast(2);
6. -o-filter:contrast(2);
7. }

10.contrast小于1

1. div .f_contrast{
2. filter:contrast(.2);
3. -webkit-filter:contrast(.2);
4. -moz-filter:contrast(.2);
5. -ms-filter:contrast(.2);
6. -o-filter:contrast(.2);
7. }

11.blur

1. div .f_blur{
2. filter:blur(10px);
3. -webkit-filter:blur(10px);
4. -moz-filter:blur(2px);
5. -ms-filter:blur(2px);
6. -o-filter:blur(2px);
7. }

12.drop-shadow

1. div .f_shadow{
2. filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
3. -webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1));
4. -moz-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
5. -ms-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
6. -o-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
7. }