📜  如何使用 CSS 创建灰度效果?

📅  最后修改于: 2021-08-30 12:40:14             🧑  作者: Mango

灰度是一种提供从彩色图像到单色图像或反之亦然的过渡效果的效果。此效果可以应用于各种事件,例如鼠标悬停,或者您也可以使用按钮来激活效果。

方法:我们将使用内置在函数grayscale() 中的 CSS 来创建这种效果。

示例 1:首先让我们看一下彩色图像到单色图像的过渡。为此,我们将在悬停选择器中使用 grayscale()函数。我们只是在鼠标悬停时将灰度值设置为 100%。



  

    
    
    Gray Scale Effect
  
    

  

    

  

输出:

示例 2:现在对于从单色图像到彩色图像的过渡,我们将执行示例 1 的相反过程。我们将在 100% 处对 标签使用 grayscale()函数,然后在鼠标上将其降低到 0% -徘徊。



  

     
     
     Gray Scale Effect
  
    

   

    

  

输出: