如何使用 CSS 向背景图像添加过滤器？

本文的目的是学习如何使用 CSS 向图像添加过滤器。 CSS filter属性用于设置元素的视觉效果。此属性主要用于图像内容。

句法：

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

例子：

HTML

  

    

  

    
        

            GeeksForGeeks
        
        

            How to add a filter to a 
            background image using CSS?
        
    

  

输出：

示例 2：

HTML

  

    

  

    

        GeeksForGeeks
    
    

        The image below is the
        normal image
    
  
    
  
    

        The image below is the
        darkened image:
    
  
    


  
                    

输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器