CSS backdrop-filter - 易学教程，面试笔记经验！

CSS 属性backdrop-filter 可帮助您向元素后面的区域（即元素的背景）添加图形效果。由于此属性在元素后面添加模糊等效果，因此元素需要完全或部分透明才能使效果可见。

属性值

背景滤镜CSS 属性可以具有以下值之一:

none:没有过滤器应用于元素的背景。
<filter-function-list>:这是一个以空格分隔的 <filter-function> 列表，将应用该列表到元素的背景。包含的函数有:blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate() 和 sepia( )。

适用范围

所有 html 元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素

语法

/* 关键字 */
backdrop-filter: none;

/* <filter-function> 函数 */
backdrop-filter: blur(4px);
backdrop-filter: brightness(80%);
backdrop-filter: contrast(20%);
backdrop-filter: drop-shadow(2px 2px 8px red);
backdrop-filter: grayscale(60%);
backdrop-filter: hue-rotate(100deg);
backdrop-filter: invert(80%);
backdrop-filter: opacity(40%);
backdrop-filter: saturate(90%);
backdrop-filter: sepia(70%);

/* 组合值 */
backdrop-filter: blur(4px) saturate(90%);

CSS backdrop-filter: none

以下示例演示使用backdrop-filter: none属性，不向元素的背景添加任何滤镜:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/red-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .nofilter-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: none CSS Property</h1>

   <div class="background-img">
   <div class="blur-box">
      <p>backdrop-filter: none</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: blur()

下面的例子演示了如何使用backdrop-filter:blur()属性来模糊元素的背景:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/scenery2.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .blur-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: blur() CSS Property</h1>

   <div class="background-img">
   <div class="blur-box">
      <p>backdrop-filter: blur(15px)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: brightness()

下面的示例演示了背景色的使用- filter:brightness()属性来增亮元素的背景:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .bright-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: brightness(50%);
      backdrop-filter: brightness(50%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: brightness() CSS Property</h1>

   <div class="background-img">
   <div class="bright-box">
      <p>backdrop-filter: brightness(50%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: contrast()

下面的例子演示了backdrop-filter:contrast的使用() 属性来添加元素背景的对比度:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .contrast-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: contrast(10%);
      backdrop-filter: contrast(10%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: contrast() CSS Property</h1>

   <div class="background-img">
   <div class="contrast-box">
      <p>backdrop-filter: contrast(10%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: Grayscale()

以下示例演示了背景滤镜的使用:grayscale( ) 属性为元素的背景添加灰度效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .gray-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: grayscale(70%);
      backdrop-filter: grayscale(70%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: grayscale() CSS Property</h1>

   <div class="background-img">
   <div class="gray-box">
      <p>backdrop-filter: grayscale(70%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: Hue-rotate()

以下示例演示了backdrop-filter的使用: hue-rotate() 属性为元素的背景添加色调旋转效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .hue-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: hue-rotate(120deg);
      backdrop-filter: hue-rotate(120deg);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: hue-rotate() CSS Property</h1>

   <div class="background-img">
   <div class="hue-box">
      <p>backdrop-filter: hue-rotate(120deg)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: invert()

下面的示例演示了使用backdrop-filter: invert() 属性为元素的背景添加反转效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .invert-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: invert(70%);
      backdrop-filter: invert(70%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: invert() CSS Property</h1>

   <div class="background-img">
   <div class="invert-box">
      <p>backdrop-filter: invert(70%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: opacity()

下面的示例演示了使用backdrop-filter:opacity()属性来调整元素背景的透明度效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/red-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .opacity-box {
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: opacity(10%);
      backdrop-filter: opacity(10%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: opacity() CSS Property</h1>

   <div class="background-img">
   <div class="opacity-box">
      <p>backdrop-filter: opacity(10%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: sepia()

下面的例子演示使用backdrop-filter: sepia()属性为元素的背景添加深褐色效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/red-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .sepia-box {
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: sepia(90%);
      backdrop-filter: sepia(90%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: sepia() CSS Property</h1>

   <div class="background-img">
   <div class="sepia-box">
      <p>backdrop-filter: sepia(90%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: saturate()

以下示例演示如何使用backdrop-filter: saturate()属性为元素的背景添加饱和效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/red-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .saturate-box {
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: saturate(180%);
      backdrop-filter: saturate(180%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: saturate() CSS Property</h1>

   <div class="background-img">
   <div class="saturate-box">
      <p>backdrop-filter: saturate(180%)</p>
   </div>
   </div>
</body>
</html>

CSS backdrop-filter: 使用多个值

以下示例演示如何使用backdrop-filter:blur()grayscale()属性向元素的背景添加模糊和灰度效果:

<html>
<head>
<style>
   .background-img {
      background: url(/css/images/orange-flower.jpg) no-repeat center;
      background-size: cover;
      align-items: center;
      display: flex;
      justify-content: center;
      height: 400px;
      width: 400px;
   }

   .multi-box {
      background-color: rgba(255, 255, 255, 0.4);
      -webkit-backdrop-filter: blur(2px) grayscale(70%);
      backdrop-filter: blur(2px) grayscale(70%);
      padding: 20px;
      margin: 30px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>backdrop-filter: blur() grayscale() CSS 属性</h1>

   <div class="background-img">
   <div class="multi-box">
      <p>backdrop-filter: blur(2px) grayscale(70%)</p>
   </div>
   </div>
</body>
</html>