CSSfilter（滤镜）详解

说起滤镜可能大家首先想到的就是 PhotoShop 之类的制图软件，通过此类软件的滤镜可以对图片进行美化。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。本节我们就来学习一下 CSS 中滤镜的使用。

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现，如下所示：

滤镜	描述
none	默认值，表示没有效果
blur(px)	为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊
brightness(%)	调整图像的亮度，默认值为 100％，代表原始图像；0％ 表示没有亮度，图像将完全变黑；当值超过 100％ 时图像将变得更亮
contrast(%)	调整图像的对比度，默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度
drop-shadow(h-shadow v-shadow blur spread color)	为图像添加阴影效果，参数说明如下： h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧； v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方； blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值； spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小； color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。 注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加，则不会有任何效果
grayscale(%)	将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值
hue-rotate(deg)	给图像应用色相旋转，该值用来定义色环的度数，默认值为 0deg，代表原始图像，最大值为 360deg
invert(%)	反转图像，默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值
opacity(%)	设置图像的不透明度，默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值
saturate(%)	设置图像的饱和度，默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值
sepia(%)	将图像转换为棕褐色，默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值
url()	url() 函数用来指定一个 XML 文件，文件中设置了一个 SVG 滤镜，并且可以包含一个锚点来指定具体的滤镜元素
initial	将属性设置为其默认值
inherit	从父元素继承此属性的值

提示：这些 CSS 函数的参数值基本上都在 0~1（0%~100%）之间，但也有几个例外，比如 blur() 函数的参数值以像素为单位，而 hue-rotate() 函数的参数值则是以“deg”为单位。

【示例】下面通过一个示例来演示 CSS 中滤镜的使用：

    


    
                   原始图像
    
      blur(4px)
    
brightness(250%)
    
  contrast(180%)
    
 grayscale(100%)
    
 hue-rotate(180deg)
    
    invert(100%)
    
   opacity(50%)
    
  saturate(7)
    
     sepia(100%)
    
    drop-shadow(8px 8px 10px green)

运行结果如下图所示：

另外，您也可以为同一个元素使用多个滤镜效果，只需要将每个滤镜函数使用空格分隔，示例代码如下：

    


    
sepia(90%) saturate(400%) brightness(150%)

运行结果如下图所示：

注意：在组合使用多个滤镜效果时，要特别注意使用的顺序，否则会产生意料之外的效果，例如在使用 grayscale() 之后再使用 sepia() 将产生一个完整的灰度图片。

不仅仅是图像，任何 HTML 元素都可以使用滤镜效果，例如文本、视频等都可以使用滤镜来美化，示例代码如下：

    


    
说起滤镜可能大家首先想到的就是 PhotoShop 之类的制图软件，通过此类软件的滤镜可以对图片进行美化。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。

运行结果如下图所示：

提示：IE 浏览器不支持 filter 属性