如何使用 CSS 使图像变暗？

方法一：使用过滤器属性：过滤器属性用于对元素应用各种图形效果。 Brightness()函数可用作应用线性乘数的值，使其看起来比原始值更暗或更亮。要使图像变暗，可以使用低于 100% 的任何值将图像按该百分比变暗。

句法：

filter: brightness(50%)

例子：

  

    
  
    

  

    

        GeeksForGeeks
    
      
    
        How to Darken an Image
        with CSS?
    
      
    

        The image below is the
        normal image:
    
      
    
      
    

        The image below is the
        darkened image:
    
      
    


  

输出：

方法 2：使用带有线性渐变的background-image属性：CSS 中的background-image属性支持使用多个相互叠加的背景。使用线性渐变属性，黑色背景用作前层，要变暗的图像用作后层。 background-image 属性的顺序指定在定义后面的图层之前首先指定的前面图层。
可以更改黑色渐变的不透明度以控制变暗的量。这可以相应地用于根据需要使图像变暗。

句法：

background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                       rgba(0, 0, 0, 0.5)), url("url_of_image"))

示例：使用 0.5 的背景渐变不透明度使图像变暗。

  

    
      
    

  

    

        GeeksForGeeks
    
      
    
        How to Darken an Image
        with CSS?
    
      
    

        The image below is the
        normal image:
    
      
    
      
    

        The image below is the
        darkened image:
    
      
    


  

输出：