CSS——滤镜（filter ）

目录

前言

一、什么是滤镜

二、滤镜的实现---filter属性

1、CSS语法

2、常用的滤镜函数

3、格式

（1）、一个图片给一个属性

 （2）、同一个元素使用多个滤镜效果，只需要将每个滤镜函数使用空格分隔

 （3）、不仅仅是图像，任何 HTML 元素都可以使用滤镜效果，例如文本、视频等都可以使用滤镜来美化

三、举例

---

 

前言

滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说 PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。

一、什么是滤镜

对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。

二、滤镜的实现---filter属性

1、CSS语法

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

2、常用的滤镜函数

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。值越大图像越模糊。 如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。 0％ 将使图像完全变黑。 默认值是 100％，代表原始图像。 值超过 100％ 将提供更明亮的结果。 不能取负值。
contrast(%)	调整图像的对比度。 0％ 将使图像完全变黑。 默认值是 100％，代表原始图像。 超过 100％ 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。 可能的值： h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值，阴影的模糊半径，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。 注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。 这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果： filter: drop-shadow(8px 8px 10px red); 提示：这个滤镜类似 box-shadow 属性。
grayscale(%)	将图像转换为灰阶。 0% (0) 是默认值，代表原始图像。<