CSS3滤镜filter浅析

　　在实现特定显示效果的页面中，css的filter属性是一种强大的工具。它能让我们的页面更加地个性化并减少PS方面的工作。filter的属性值主要有以下十种：

1. 1. blur
   2. grayscale
   3. sepia
   4. saturate
   5. hue-rotate
   6. invert
   7. brightness
   8. contrast
   9. opacity
   10. drop-shadow

　　本文使用的图片如下：

　　一、blur属性。blur的使用格式一般为 filter: blur(1px); -webkit-filter: blur(1px)； 该属性用来为元素增加模糊效果，显示效果如下:

　　二、grayscale属性。grayscale的使用格式一般为 filter: grayscale(0.6); -webkit-filter: grayscale(0.6); 该属性用来设置元素的灰度，可以使彩色图片变为黑白，显示效果如下：

　　三、sepia属性。sepia的使用格式一般为 filter: sepia(0.6); -webkit-filter: sepia(0.6); 该属性用来设置元素的褐色，显示效果如下：

　　四、saturate属性。saturate的使用格式一般为： filter: saturate(0.15); -webkit-filter: saturate(0.15); 该属性常用来改变图片的饱和度，显示效果如下：

　　五、hue-rotate属性。hue-rotate的使用格式一般为： filter: hue-rotate(189deg); -webkit-filter: hue-rotate(189deg); 该属性常用来改变图片的色相，显示效果如下：

　　六、invert属性。invert的使用格式一般为： filter: invert(56%); -webkit-filter: invert(56%); 该属性用来实现反色，invert做出来的效果就像是我们照相机底面的效果一样，显示效果如下：

　　七、brightness属性。brightness的使用格式一般为： filter: brightness(300%); -webkit-filter: brightness(300%); 该属性用来设置图片的亮度，显示效果如下：

　　八、contrast属性。contrast的使用格式一般为： filter: contrast(56%); -webkit-filter: contrast(56%); 该属性用来改变图片的对比度，显示效果如下：

　　九、opacity属性。opacity的使用格式一般为： filter: opacity(56%); -webkit-filter: opacity(56%); 该属性用来设置图片的透明度，显示效果如下：

　　十、drop-shadow属性。drop-shadow的使用格式一般为： filter: drop-shadow(10px 10px 10px yellow); -webkit-filter: drop-shadow(10px 10px 10px yellow); 用来给图片增加阴影效果，与box-shadow类似，显示效果如下：

　　ps：opacity在IE下的显示方法：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

 

转载于:https://www.cnblogs.com/monkeyleo/p/5545006.html