CSS 过滤器

在本文中，我们将介绍CSS的过滤器，包括filter属性以及一些常用的过滤器函数。

阅读更多：CSS 教程

filter属性

CSS3中引入了filter属性，允许我们通过一些函数来改变元素的外观。filter属性可以应用于大多数HTML元素，包括图片和背景图像。

语法

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

/* 或者多个函数组合在一起 */
filter: blur(2px) invert(50%) drop-shadow(0 0 3px #888);

例子

下面是一些常见的CSS过滤器及其效果。

1. 模糊过滤器 – blur()

blur()函数用于创建一个模糊效果。该函数接受一个数字参数，表示模糊的程度。数值越大，模糊效果越明显。

img {
  filter: blur(5px);
}

2. 亮度过滤器 – brightness()

brightness()函数用于改变元素的亮度。该函数接受一个百分比参数，表示元素的亮度。百分比越高，元素越亮。

img {
  filter: brightness(150%);
}

3. 对比度过滤器 – contrast()

contrast()函数用于改变元素的对比度。该函数接受一个百分比参数，表示元素的对比度。百分比越高，元素的对比度越强。

img {
  filter: contrast(200%);
}

4. 阴影过滤器 – drop-shadow()

drop-shadow()函数用于为元素创建一个阴影效果。该函数接受多个参数，包括阴影的偏移量、模糊半径和阴影颜色。

img {
  filter: drop-shadow(2px 2px 5px #888);
}

5. 灰度过滤器 – grayscale()

grayscale()函数用于将元素转换为灰度图像。该函数接受一个百分比参数，表示元素的灰度级别。百分比越高，元素越接近黑白图像。

img {
  filter: grayscale(100%);
}

6. 色相旋转过滤器 – hue-rotate()

hue-rotate()函数用于改变元素的色相。该函数接受一个角度参数，表示元素的色相。角度越大，色相旋转的越明显。

img {
  filter: hue-rotate(90deg);
}

7. 反转颜色过滤器 – invert()

invert()函数用于将元素的颜色反转。该函数接受一个百分比参数，表示元素颜色反转的程度。百分比越高，反转的程度越大。

img {
  filter: invert(100%);
}

8. 不透明度过滤器 – opacity()

opacity()函数用于改变元素的不透明度。该函数接受一个百分比参数，表示元素的透明度。百分比越低，元素越透明。

img {
  filter: opacity(50%);
}

9. 饱和度过滤器 – saturate()

saturate()函数用于改变元素的饱和度。该函数接受一个百分比参数，表示元素的饱和度。百分比越高，元素的颜色越鲜艳。

img {
  filter: saturate(200%);
}

10. 褐色过滤器 – sepia()

sepia()函数用于将元素转换为褐色图像。该函数接受一个百分比参数，表示转换的程度。百分比越高，元素越褐色。

img {
  filter: sepia(100%);
}

过滤器组合

可以将多个过滤器组合在一起，以创建更复杂的效果。可以像下面这样组合多个过滤器。

img {
  filter: grayscale(100%) sepia(100%) opacity(50%);
}

浏览器兼容性

CSS的过滤器是CSS3的一部分，因此不是所有浏览器都支持它们。兼容性问题主要出现在IE浏览器和早期版本的Chrome和Firefox中。可以使用CSS前缀来解决兼容性问题。

/* Firefox */
-moz-filter: blur(2px);

/* Chrome 和 Safari */
-webkit-filter: blur(2px);

/* Opera */
-o-filter: blur(2px);

/* IE10+ */
-ms-filter: blur(2px);
filter: blur(2px);