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