CSS 如何将图像颜色转为黑白

CSS（层叠样式表）是一种强大的语言，用于控制网页的视觉呈现。我们可以通过CSS的一个重要功能来将图像在网页上的颜色变为黑白。

使用CSS将图像颜色变为黑白是一个简单的过程，可以使用几种不同的方法来实现。在本文中，我们将学习三种不同的使用CSS将图像转换为黑白的方法。

方法1 - 使用”grayscale”滤镜
方法2 - 使用”brightness”和”saturate”滤镜
方法3 - 使用”hue-rotate”滤镜

方法1：使用”grayscale”滤镜

“grayscale”滤镜是使用CSS将图像颜色变为黑白的最基本和常见的方法。该滤镜接受一个介于0%和100%之间的值，其中0%表示图像应为完全彩色，100%表示图像应为完全黑白。可以通过将以下CSS代码添加到图像的CSS类中来应用该滤镜。

语法

css-selector {
   /css code…
}

示例

这是一个使用“grayscale”滤镜在css中改变图像颜色的示例。

<html>
   <title>Change the color of an image in css using a "grayscale" filter</title>
   <head>
      <style> 
         body {
            text-align:center;
         }
         .img{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <h3>Original Image</h3>
      <img src="/css/images/logo.png" alt="image">
      <h3>after using "grayscale" filter</h3><br>
      <img class="img" src="/css/images/logo.png" alt="image">
   </body>
</html>

方法2：使用”brightness”和”saturate”滤镜

通过使用CSS，”brightness”和”saturate”滤镜是将图像转换为黑白的第二种方法。”brightness”滤镜用于调整图像的整体亮度，而”saturate”滤镜用于调整图像的饱和度。

语法

css-selector {
   filter: brightness(0.5) saturate(0%);
}

示例

以下是一个使用“亮度”和“饱和度”滤镜在CSS中更改图像颜色的示例。

<html>
   <title>Change the color of an image in css using a "brightness" and "saturate" filters</title>
   <head>
      <style>
         body {
            text-align:center;
         }
         .img{
            filter: brightness(0.5) saturate(0%);
         }
      </style>
   </head>
   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <h3>Original Image</h3>
      <img src="/css/images/logo.png" alt="image">
      <h3>after using "brightness" and "saturate" filters</h3><br>
      <img class="img" src="/css/images/logo.png" alt="image">
   </body>
</html>

方法3：使用“hue-rotate”滤镜

“hue-rotate”滤镜用于旋转图像的色相，可用于将图像转为黑白。

语法

css-selector {
   filter: hue-rotate(180deg);
}

示例

以下是使用“hue-rotate”滤镜在CSS中更改图像颜色的示例。

<html>
   <title>Change the color of an image in css using a "hue-rotate" filters</title>
   <head>
      <style> 
         body {
            text-align:center;
         }
         .img{
            filter: hue-rotate(180deg);
         }
      </style>
   </head>
   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <h3>Original Image</h3>
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200"" alt="image">
      <h3>after using "hue-rotate" filters</h3><br>
      <img class="img" src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200"" alt="image">
   </body>
</html>