filter元素本身滤镜

  • **filter** 将模糊或颜色偏移等图形效果应用于元素。

  • 滤镜通常用于调整图像、背景和边框的渲染

    url()

  • 获取指向 SVG 滤镜的 URI

    filter: url(resources.svg#c1)

blur() 模糊

  • 函数将**高斯模糊**应用于输入图像。
  • radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。
  • 若没有设置值，默认为 0。

  • 该参数可以指定为 CSS 长度，但不接受百分比值。

    示例 filter: blur(5px)

  • image.png

    brightness() 变亮

  • 函数将线性乘法器应用于输入图像，使其看起来或多或少地**变得明亮**。

  • 值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。

  • 其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。

    若没有设置值，默认为 1 filter: brightness(2)

  • image.png

  • 为3

  • image.png

    contrast() 对比度

  • 函数可调整输入图像的**对比度**。

  • 值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。

    若没有设置值，默认是 1。 filter: contrast(2);

  • image.png

    drop-shadow() 阴影

  • 函数对输入图像应用**阴影效果**。

  • 阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。
  • 函数接受 （在 CSS3 背景中定义）类型的值，除了 inset 和 spread 关键字。

  • 该函数与已有的 box-shadow 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

    filter: drop-shadow(16px 16px 10px black) x 轴 y轴 模糊效果 模糊颜色

  • image.png

    grayscale() 灰度

  • 函数将改变输入**图像灰度**。

  • 值为 100% 则完全转为灰度图像，值为 0% 图像无变化。

  • 值在 0% 到 100% 之间，则是效果的线性乘数。

    若未设置值，默认是 0。 filter: grayscale(100%)

  • image.png

    hue-rotate()色相旋转

  • 函数在输入图像上应用**色相旋转**。

  • angle 一值设定图像会被调整的色环角度值。

  • 值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

    filter: hue-rotate(90deg)

  • image.png

    invert() 反转图像

  • 函数**反转输入图像**。

  • 值为 100% 则图像完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。

    若未设置值，则默认为 0。 filter: invert(100%)

  • image.png

    opacity() 透明

  • 转化图像的**透明程度**。

  • amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。
  • 值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。

  • 该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。

    若未设置值，则默认为 1。 filter: opacity(50%)

  • image.png

    saturate()饱和度

  • 函数转换图像**饱和度**。

  • amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。

  • 其他值是效果的线性乘数。超过 100% 则有更高的饱和度。

    若未设置值，则默认为 1。 filter: saturate(200%)

  • image.png

    sepia() 深褐色

  • 函数将图像转换为**深褐色**。

  • amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。

    若未设置值，则默认为 0。 filter: sepia(100%)

  • image.png

    复合写法

  • 你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。

    1. filter: contrast(175%) brightness(103%)

backdrop-filter 背景滤镜

  • **backdrop-filter**属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。
  • 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 ```css / 关键词值 / backdrop-filter: none;

/ 指向 SVG 滤镜的 URL / backdrop-filter: url(commonfilters.svg#filter)

/ 滤镜函数值 / backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%);

/ 多重滤镜 / backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/ 全局值 / backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: unset;

<a name="uq1PY"></a>
### 示例
```css
<!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>
      html,
      body {
        height: 100%;
        width: 100%;
        background-image: linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
      }
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
      }
      .box {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        font-family: sans-serif;
        text-align: center;
        backdrop-filter: blur(10px);
        max-width: 50%;
        max-height: 50%;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <p>backdrop-filter: blur(10px)</p>
      </div>
    </div>
  </body>
</html>