前言

如果在开发中业务那边提出一些需求：
- 让我们需要做一个毛玻璃的效果；
- 是给我们一张人物的背景图片，现在需要给这张图片中的任务添加阴影效果，我们该怎么实现呢？
  - 按照我自己来说，我首先想到的是 box-shadow ，但是该属性值针对整个盒子进行设置阴影的，用在此处就不对了，此时我们就需要用到 filter这个属性了；
- 还有就是当我们在918这些特殊日子的时候，我们会看到所有的网站或App都呈现灰色的效果，这个是用 filter实现的；
注意：
- filter属性和 backdrop-filter属性的属性值是一样的；

一、filter简介

定义：
- filter属性定义元素的可视效果（例如：模糊与饱和度等等）；
- 该属性将模糊或颜色偏移等图形效果应用于元素；

语法：

css 复制代码

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

注意：
- filter 的 默认值 为 no；
- 不能继承；
- 支持动画效果；
- 使用 JS 对 filter 进行修改：
  js 复制代码
```
object.style.WebkitFilter = 'filter函数';
```
- 作用于元素本身；

二、backdrop-filter

该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明；
使用该属性最常见的就是实现 毛玻璃 的效果；
注意：
- 作用于元素背后的区域所覆盖的所有元素；
- 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

三、filter函数介绍

filter 通常使用百分比(75%)，当然也可以使用小数表示(0.75 / .75)；

Filter函数	描述
`none`	默认值，没有效果
`blur(px)`	给图像设置高斯模糊。`radius` - 值设定高斯函数的标准差，或者是屏幕上以多少像素交融在一起，所以值越大图像越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值
`brightness(%)`	给图片一种线性乘法，使其看起来更亮或者更暗，如果值是`0%`，图像会全黑。反之，如果值为 `100%`，则图像无变化。其他的值对应线性乘法效果。值超过 `100%` 也是可以的，但是图像会比原来更亮.如果没有设定值，默认是1
`contrast(%)`	调整图像的对比度。值是`0%`的话，图象为全黑。值是 `100%`，图像不变。值可以超过`100%`，意味着会运用更低的对比。若没有设置值，默认是1
`drop-shadow(h-shadow v-shadow blur spread color)`	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受`<shadow>`(在CSS3背景中定义)类型的值，除了`"inset"`关键字是不允许的。该函数与已有的`box-shadow box-shadow`属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。`<shadow>` 参数如下： `<offset-x> <offset-y>` (必须 ) 这是设置阴影偏移量的两个`<length>`值。`<offset-x>`设定水平方向距离. 负值会使阴影出现在元素左边。`<offset-y>`设定垂直距离.负值会使阴影出现在元素上方。查看`<length>`可能的单位。如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 `<blur-radius> and/or <spread-radius>`，会有模糊效果)； `<blur-radius>` (可选) 这是第三个code>`<length>`值。值越大，越模糊，则阴影会变得更大更淡。不允许负值若未设定，默认是0 (则阴影的边界很锐利)； `<spread-radius>` (可选 ) 这是第四个`<length>`值。正值会使阴影扩张和变大，负值会是阴影缩小。若未设定，默认是0 (阴影会与元素一样大小)。注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染； `<color>` (可选 ) 查看 `<color>`该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
`grayscale(%)`	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
`hue-rotate(deg)`	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
`invert(%)`	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
`opacity(%)`	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
`saturate(%)`	转换图像饱和度。值定义转换的比例。值为`0%`则是完全不饱和，值为`100%`则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
`sepia(%)`	将图像转换为深褐色。值定义转换的比例。值为`100%`则完全是深褐色，值为`0%`图像无变化。值在 `0% ~ 100%` 之间，则是效果的线性乘子。若未设置，值默认是0
`url()`	URL函数接受一个XML文件，该文件设置一个SVG滤镜，且可以包含一个描点来指定一个具体的滤镜元素。例如：`filter: url(svg-url#element-id);`
`initial`	设置属性为默认值，可参阅: CSS - initial 关键字
`inherit`	从父元素继承该属性，可参阅: CSS - inherit 关键字

三、常见的效果

3.1 毛玻璃

css 复制代码

background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

3.2 整个网站或页面呈现灰色

css 复制代码

html {
    /* 下面两行代码意义相同 */
    filter: grayscale(100%);
    /* filter: grayscale(1); */
}

效果展示：
- 原来的效果：
- 添加属性之后的效果：
也可以给某个区域单独设置；

3.3 给不规则图形添加阴影效果

前提：
- 图片的背景色是透明的；
- 此处的背景色指得不是background-color；
- 意思是将需要添加阴影的不规则图形单独切出来放在一个图层上；
- 在VSCode中打开是这样的；
示例展示：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      justify-content: space-between;
      width: 900px;
      margin-top: 200px;
      padding: 0 200px;
    }

    img {
      width: 400px;
      filter: drop-shadow(20px 8px 14px rgba(0, 0, 0, .4));
      background-color: transparent;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="../Images/shou.png" alt="">
    <img src="../Images/bangong.png" alt="">
  </div>
</body>

</html>

效果展示：
大家可以去这个网站上找两张背景透明的图片试试；
- 新图网；
- 每天有两次免费下载的机会；

3.4 给图片添加灰色蒙层

需求：
- 给图片添加灰色蒙层，鼠标放上去的时候，让蒙层从左到右或从右到慢慢滑过去或消失；
filter 与 backdrop-filter 实现效果对比：

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 50px auto;
      background: url('../Images/wallhaven-yxg7dd_2980x1987.png') no-repeat;
      background-size: contain;
      cursor: pointer;
      overflow: hidden;
    }

    .box::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      /* background-color: rgba(255, 0, 0); */
      transition: all .4s;
    }

    .filter {
      filter: grayscale(1);
    }

    .backdrop-filter::before {
      backdrop-filter: grayscale(1);
      -webkit-backdrop-filter: grayscale(1);
    }

    .box:hover::before {
      transform: translate(100%, 0);
    }
  </style>
</head>

<body>
  <div class="box filter"></div>
  <div class="box backdrop-filter"></div>
</body>

</html>

效果展示：
总结：
- 首先，我们可以看到，当鼠标hover上去的时候，before是移动的了；
  - 此处设置背景颜色是为了验证我们的hover没问题；
  - 如果不设置背景颜色，鼠标hover第一张图片的时候，没有任何效果，不方便我们观察；
- 其次，我们可以看到：
  - 使用filter属性的元素，不管是元素本身还是父元素都变成灰色了；
  - 使用backdrop-filter属性的元素，是div的伪元素，该属性会使伪元素后面的元素变成灰色，而不是整个元素，当鼠标hover上去的时候，伪元素慢慢移走了，所以我们就能看到彩色的图片了；
- 如果想使用filter实现蒙层效果，就要使用JS了😂😂（大家可以试试）；

前端笔记 - 【CSS】 - filter 于 backdrop-filter

前言

一、filter简介

二、backdrop-filter

三、filter函数介绍

三、常见的效果

3.1 毛玻璃

3.2 整个网站或页面呈现灰色

3.3 给不规则图形添加阴影效果

3.4 给图片添加灰色蒙层