本文使用的图片如下:
一、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);