css 改变图像饱和度

📌 相关文章

📜 css 改变图像饱和度 - CSS (1)

📅 最后修改于: 2023-12-03 15:14:21.837000 🧑 作者: Mango

CSS允许您通过使用滤镜来更改图像的饱和度。饱和度是指图像的颜色强度。

在本文中，我们将介绍如何使用CSS实现此目标。

语法

要更改图像的饱和度，您可以使用CSS滤镜属性，并将值设置为saturate（）函数。如下所示：

filter: saturate(50%);

在上面的代码中，50％的值表示将图像的饱和度减半。

示例

在下面的示例中，我们将使用一个图像，并将其图像饱和度更改为50％。

<!DOCTYPE html>
<html>
  <head>
    <title>Change Image Saturation using CSS</title>
    <style>
      img {
        filter: saturate(50%);
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3schools.com/images/picture.jpg" alt="Picture">
  </body>
</html>

在上面的代码中，我们将图像的滤镜设置为saturate（50％）。运行该代码，您将看到图像饱和度下降了50％。

总结

CSS滤镜属性允许您更改图像的饱和度。您可以使用saturate（）函数来设置饱和度的值，并通过将其与图像的过滤器属性结合使用来实现此目标。