CSS3滤镜(filter)--CSS3技术

原文链接： http://www.cnblogs.com/qikeyishu/p/7551211.html

filter 属性定义了元素(通常是)的可视效果，例如图片的模糊、饱和度、灰度等……个人感觉功能很强大

1、filter的语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

2、各大浏览器当前时间的支持情况（来自Can I use：http://caniuse.com/）

可以看到IE8,9,10,11、OPera Mini所有、以及Android Broswer4.3当前都是不支持

3、filter各函数

1）模糊效果blur(px)函数

　　


　　

　　　　
　　

原图（Top）与效果图（Bottom）：

  

   

2）使图片变量brightness(%)函数

　　


　　

　　　　
　　

原图（Top）与效果图（Bottom）：

  

  

4）调整图像对比度Contrast(%)函数

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）：

  

  

4）阴影效果drop-shadow（px,px,px,px）

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）：

  

5）将图像转换为灰度图像Grayscale(%)

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）：

 

 

6）色相旋转hue-rotate(deg)

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）：

7）反转输入图像

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）：

8）改变图像的透明度

　　


　　

　　　　
　　

原图（Top）和效果图（Bottom）

9）饱和度设置saturate(%)

　　


　　　　

　　　　　　
　　　　

原图（Top）和效果图（Bottom）

10）将图像转换为深褐色sepia(80%)

　　


　　　　

　　　　　　
　　　　

原图（Top）和效果图（Bottom）

 

11）URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素  url()

filter: url(svg-url#element-id)

12）复合函数使用多个滤镜，每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

　　　


　　　　

　　
　　　　

原图（Top）和效果图（Bottom）

13）其他

initial：设置属性为默认值

inherit：从父元素继承该属性

本文系作者原创，转载请注明出处，感谢合作！文章难免会有不足之处，如有纰漏，非常感谢您的指出，您可追加评论或者QQ留言。

转载于:https://www.cnblogs.com/qikeyishu/p/7551211.html