如何使用CSS创建灰度效果？

原文:https://www . geesforgeks . org/如何使用 css 创建灰度效果/

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

方法:我们将使用 CSS 内置函数灰度()来创建这个效果。

例 1: 首先来看看彩色图像到单色图像的过渡。为此，我们将在悬停选择器中使用灰度()功能。我们只是在鼠标悬停时将灰度值设置为 100%。




    
            ">
    
    


    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">




输出:

示例 2: 现在，对于从单色到彩色图像的过渡，我们将执行示例 1 的相反过程。我们将对标签使用 100%灰度()函数，然后在鼠标悬停时将其降低到 0%。




     
             ">
     
    


    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">




输出: