所谓的 filter，实际上就是给网页的元素添加上滤镜，从而实现一些特殊的显示效果，例如修改这个元素的透明度，让这个元素变模糊，让这个元素变成黑白色，让这个元素反色，这些效果都可以通过 filter 实现。

滤镜	释义
filter:blur(5px)	模糊
filter:brightness(2.4)	亮度
filter:contrast(200%)	对比度
filter:drop-shadow(4px 4px 8px blue)	投影
filter:grayscale(50%)	灰度
filter:hue-rotate(90deg)	色调旋转
filter:invert(75%)	反相
filter:opacity(25%)	透明度
filter:saturate(230%)	饱和度
filter:sepia(60%)	褐色

以上是 CSS 3 支持的滤镜，这里我们使用下面的两个图片来测试，网页结构如下：

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .grid-box {
            display: grid;
            grid-template: 400px/400px 400px;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-box">
        <div class="item">
            <img src="https://picsum.photos/400/400" alt="">
        </div>
        <div class="item filter">
            <img src="https://picsum.photos/400/400" alt="">
        </div>
    </div>
</body>
</html>

效果如图所示：


由于图片使用的是随机生成的，所以每次添加滤镜后刷新图片都不一样。

blur

.filter {
	filter: blur(20px);
	/*
	blur()函数支持任意长度值，但是不支持百分比值。 blur()函数的参数值表示高斯函数的标准偏差值，可以理解为屏幕上互相融合的像素数量。因此，blur()函数的参数值越大，图像的模糊效果越明显。
	*/
}


.filter {
	filter: brightness(2);
	/*brightness()函数的参数值支持数值和百分比值，范围是0到无穷大。参数值0或0%表示纯黑色，参数值1或100%表示正常的亮度，0～1或0%～100%的亮度是线性变化的。随着参数值逐渐大于1或大于100%，元素的亮度也会逐渐提升。*/
}


contrast

.filter {
	filter: contrast(0.5);
	/*contrast()函数的参数值支持数值和百分比值，范围是0到无穷大。参数值0或0%表示毫无对比度，表现为纯灰色，色值是#808080，使用RGB色值表示为rgb(128,128,128)，也就是gray颜色关键字对应的色值。注意，这里说的是纯灰色，图像会直接变成一个灰色色块，而不是图像灰度。参数值1或100%表示正常的对比度。随着参数值逐渐大于1，元素的对比度也会逐渐提升。*/
}


注意，多个滤镜是可以混用的，直接调用多个函数然后用空格隔开即可，注意是空格隔开，而不是逗号，如果用逗号隔开，那么滤镜将失效

drop-shadow

使用 drop-shadow () 函数可以给元素设置符合真实世界阴影规则的投影效果。

这个滤镜可以看做是 box-shadow 的升级版，box-shadow 是盒子阴影，如果盒子的边框是虚线，阴影依旧是盒子的阴影，而 drop-shadow 则有显著的不同


以上是对比

语法：filter: drop-shadow(x偏移 y偏移 模糊大小 色值);

注意，多个参数中间没有逗号

• drop-shadow()函数不支持扩展，因为真实世界的投影是没有所谓的扩展的。
• drop-shadow()函数没有内投影效果，而box-shadow属性可以使用inset关键字实现内阴影效果。
• drop-shadow()函数不支持投影叠加，box-shadow属性则允许无限累加投影

grayscale

.filter {
	filter: grayscale(1);
	/*
	使用grayscale()函数可以实现元素的去色效果，让所有彩色值变成灰度值。grayscale()函数的参数值支持数值和百分比值，范围是0到无穷大。参数值为1或100%的时候表现为完全灰度；参数值大于1或100%的时候也表现为完全灰度。
	*/
}


一些网站在某些日子，比如国家公祭日，会将网页全部设为灰色，就是通过改属性实现的。一些时候我们可能需要点亮图标这些操作，也可以这样实现，从而让设计少设计一张灰色的图片。

hue-rotate

hue-rotate()函数可以调整元素的色调，但饱和度和亮度保持不变

hue-rotate()函数的参数值支持角度值

.filter {
	filter: hue-rotate(180deg);
}


相当于就是一个色相盘，按照一定的角度去旋转

该属性可以用来做一些动态的色调变化效果

invert

invert()函数可以让元素的亮度和色调同时反转 invert()函数的参数值支持数值和百分比值，范围是0到无穷大。

参数值为1或100%的时候图像表现为完全反相。单纯从语法上来说，值可以大于1或者大于100%，但是效果不会再进一步变化。0或0%表示正常的图像表现。

实际上这就是一个反色的效果

.filter {
	filter: invert(1);
}


opacity

opacity()函数可以改变元素的透明度，效果和opacity属性类似

opacity()函数和opacity属性的区别在于，在部分浏览器中，使用opacity()函数可以启用硬件加速，性能会更好。不过由于opacity属性本身性能就非常好，因此没有任何必要使用opacity()函数。

.filter {
	filter: opacity(0.5);
}


saturate

saturate()函数可以调整元素的饱和度

saturate()函数的参数值支持数值和百分比值，范围是0到无穷大。参数值0或0%表示毫无饱和度，表现为灰度效果，等同于grayscale(1)；参数值1或100%表示正常的饱和度；随着参数值逐渐大于1，元素的饱和度也会逐渐提升。

.filter {
	filter: saturate(1.5);
}


sepia

sepia()函数可以让元素的视觉效果向褐色靠拢.

sepia()函数的参数值支持数值和百分比值，范围是0到无穷大。当参数值为1或100%，或者大于1或100%时，图像均表现为深褐色；当参数值为0或0%时，图像还是原始效果。

.filter {
	filter: sepia(1);
}


很显然，这个滤镜是一个类似于老照片的滤镜

注意，这里都是用图片进行演示，但是 CSS 滤镜不止可以给图片添加，任何 DOM 元素都可以添加，例如给 HTML 元素添加黑白滤镜，就可以实现全页面黑白的效果。

backdrop-filter

这个属性和 filter 类似，但是很不一样，filter 能用的滤镜函数，在 backdrop-filter 中都可以用，但是 filter 是直接给元素添加滤镜，而 backdrop-filter 给一个元素加上滤镜之后，并不会在这个元素上生效，而如果透过这个元素去看其他元素，就会产生这个滤镜效果，就类似一个滤镜镜片。

这个属性最典型的应用场景就是毛玻璃效果，如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        display: grid;
        background-image: url(https://picsum.photos/500/500);
        place-items: center;
      }
      .item {
        width: 300px;
        padding: 20px 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        backdrop-filter: blur(10px);
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum maiores
        cumque modi minima, ut mollitia accusamus! Dolorum praesentium mollitia
        inventore, eius in ipsa totam amet. Beatae eligendi ut sed minima!
      </div>
    </div>
  </body>
</html>


此时就实现了毛玻璃效果。

混合模式

混合模式：元素的内容应该与元素的直系父元素的内容和元素的背景如何混合

混合模式六大类	混合模式类型	background-blend-mode	mix-blend-mode
（一）覆盖组	normal（默认值。设置正常的混合模式）	✅	✅
（二）去亮组	darken（变暗模式）	✅	✅
-	multiply（正片叠底模式）	✅	✅
-	color-burn（颜色加深模式）	✅	✅
（三）去暗组	lighten（变亮模式）	✅	✅
-	plus-lighter（类似于亮色,但对中色调的影响更大）	❌	✅
-	screen（滤色模式）	✅	✅
-	color-dodge（颜色减淡模式）	✅	✅
（四）对比组	overlay（叠加模式）	✅	✅
-	soft-light（柔光模式）	✅	✅
-	hard-light（强光模式）	✅	✅
（五）差值组	difference（差值模式）	✅	✅
-	exclusion（排除模式）	✅	✅
（六）色彩组	hue（色调混合模式）	✅	✅
-	saturation（饱和度模式）	✅	✅
-	color（颜色模式）	✅	✅
-	luminosity（亮度模式）	✅	✅

1. normal： 默认值。内容不与背景混合。单纯的覆盖

2. ** darken（变暗）：**两张图在一起，谁亮就把谁丢了。（黑 + 灰） 得到的就是黑，黑色更暗

3. multiply(正片叠底) : 图会更暗 （黑 + 任何 = 黑，白 + 任何 = 任何）

4. color-burn（颜色加深）：暗的地方会变暗，甚至变黑，亮的地方不变，用的比较少

5. lighten（变亮模式）：两张图在一起，谁暗就把谁丢了， 与darken模式相反

6. screen（滤色模式）：整体颜色变亮（滤白得白，滤黑无效）

7. color-dodge（颜色减淡模式）：亮的更亮，暗的不管

8. overlay（叠加模式）： 亮的更亮，暗的更暗（正片叠底和滤色的后代）

9. hard-light(强光模式)

公式一样，取决于顺序。

10. soft-light（柔光模式）：会更柔和

11. difference（差值模式）

12. hue（色相混合模式） ： 不改变饱和度和亮度

13. saturation（饱和度模式）：不改变色相和亮度

14. color（颜色模式）：同时改变色相和饱和度

15. luminosity（亮度模式） ：只控制亮度不修改色相和饱和度