📌  相关文章
📜  CSS filter属性

📅  最后修改于: 2020-11-04 06:38:13             🧑  作者: Mango

CSS filter属性

CSS filter用于为文本，图像和网页的其他方面设置视觉效果。 CSS过滤器属性允许我们访问颜色或模糊之类的效果，从而在显示元素之前转移元素的渲染。

CSS filter属性的语法如下。

句法

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

让我们讨论一个示例的属性值。

brightness()

顾名思义，它用于设置元素的亮度。如果亮度为0％，则表示完全为黑色，而100％亮度为原始亮度。它还可以接受高于100％的值，以提供更明亮的结果。

我们可以通过以下插图来理解它。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
brightness(130%)

blur()

用于将模糊效果应用于元素。如果未指定模糊值，则将值0用作默认值。 blur()属性中的参数不接受百分比值。较大的值会产生更多的模糊。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
blur(2px)

invert()

它用于反转输入图像中的样本。其100％值表示完全反转，而0％值则保持不变。不允许使用负值。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
invert(60)

saturate()

它设置元素的饱和度。 0％的饱和度代表完全不饱和的元素，而100％的饱和度代表原始的元素。允许大于100％的值提供超饱和结果。我们不能对此属性使用负值。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
saturate(40)

drop-shadow()

它将阴影效果应用于输入图像。它接受的值是h阴影，v阴影，模糊，散布和颜色。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
 drop-shadow(10px 20px 30px yellow);

contrast()

它调整输入的对比度。其0％的值将创建一个全黑的图像，而100％的值则保持不变，即代表原始图像。允许大于100％的值提供对比度较低的结果。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
 contrast(50%)

opacity()

用于将透明度应用于输入图像。其0％值表示完全透明，而100％值表示原始图像，即完全不透明。

让我们通过插图来了解它。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
 opacity(40%)

hue-rotate()

它将色相旋转应用于输入图像。其周长值定义了色环周围的度数；图像将被调整。其默认值为0度，代表原始图像。最大值为360度。

让我们通过插图来了解它。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
 hue-rotate(240deg)

grayscale()

它将输入图像转换为黑白图像。 0％灰度代表原始灰度，而100％代表完全灰度。它将对象的颜色转换为256个灰色阴影。

例

 
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
  grayscale(80%)

sepia()

它用于将图像转换为棕褐色图像。 0％的值表示原始图像，而100％的值表示完全棕褐色。

例

  
 
      
 
    CSS filter property 
     
 
 
         
Original Image    

         
  sepia(90%)