【CSS】filter滤镜2

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

---

filter

接上文

（1）色相效果hue-rotate

• 使用filter: hue-rotate()来在目标元素上应用色相旋转

  • 属性值：为角度值deg，默认为0deg，表示图像无变化，可以持续增加，每360deg为一周期，表示色相效果重新开始
  • 没有最大值

• 对比示例

   .spider1 {
       filter: hue-rotate(0deg);
   }
   .spider2 {
       filter: hue-rotate(100deg);
   }
  

  

（2）反转效果invert

• 使用filter: invert()来反转目标元素

  • 属性值：最大值为1，为默认值，表示完全反转；最小值为0，表示没有变化
  • 也可以使用百分比值

• 对比示例

   .spider1 {
       filter: invert(0%);
   }
   .spider2 {
       filter: invert(100%);
   }
  

  

（3）饱和度效果saturate

• 用于转换图像的饱和度，使用filter: saturate()

  • 属性值为从0% ~ 100% ~ 100%+
  • 0%表示完全不饱和，图像呈现无色状态
  • 100%表示完全饱和，图像无变化
  • 100%+表示提升图像饱和度，图像会更加鲜艳

• 对比示例

   .spider1 {
       filter: saturate(0%);
   }
   .spider2 {
       filter: saturate(100%);
   }
   .spider3 {
       filter: saturate(200%);
   }
  

  

（4）灰褐色效果sepia

• 可以将图像转换为深褐色，使用filter: sepia()

  • 属性值为0% ~ 100%
  • 0%表示图像无变化，默认值
  • 100%表示图像完全转换为深褐色并，效果同filter: saturate(0%);

• 对比示例

   .spider1 {
       filter: sepia(0%);
   }
   .spider2 {
       filter: sepia(100%);
   }
  

  

（5）灰度效果grayscale

• 可以将图像转换为灰度图像，使用filter: grayscale()

  • 属性值为0% ~ 100%
  • 0%表示图像无变化，默认值
  • 100%表示完全转为灰度图像，效果同filter: saturate(0%);

• 对比示例

   .spider1 {
       filter: grayscale(0%);
   }
   .spider2 {
       filter: grayscale(100%);
   }
   .spider3 {
       filter: saturate(0%);
   }
  

  

backdrop-filter

对于filter滤镜，它所实现的效果都会作用于整个元素区域，也包括元素的内容，这将导致一些不必要的情况出现

• 比如，如果想要实现背景模糊可以使用filter: blur()来实现，不过

  • filter实现的模糊是整个元素模糊，这也包括了目标元素内的所有内容，如文字
  • 这就和我们想要的效果相差甚远
  • 为此，只有使用伪元素来实现这种背景模糊、内容不模糊的效果

• 但除此之外，通过backdrop-filter可以更简单的实现只对背景区域进行模糊，而保持元素的内容不受影响

   .box1 {
       background-color: rgba(255, 255, 255, 0.5);
       filter: blur(4px);
   }
   .box2 {
       background-color: rgba(255, 255, 255, 0.5);
       backdrop-filter: blur(4px);
   }
  

  

• backdrop-filter就是只作用于元素后面区域的滤镜属性

  • 它接受所有可以作为filter属性的属性值
  • 并且，所有滤镜效果只会作用在元素的后面区域上，不会对元素本身的样式产生任何影响

   .box1 {
       color: #f0f;
       background-color: rgba(255, 255, 255, 0.5);
       filter: hue-rotate(200deg);
   }
   .box2 {
       color: #f0f;
       background-color: rgba(255, 255, 255, 0.5);
       backdrop-filter: hue-rotate(200deg);
   }
  

  

---

\