CSS 如何加深图像的颜色

CSS是一种在网页开发中常用的用于格式化网页的语言。它允许您改变和改进网页上许多组件的外观，包括照片。

在本文中，我们将讨论加深图片是一种常见的方法，可以使照片看起来更加戏剧化或忧郁。在这个过程中，会改变图像的亮度和对比度水平，使其看起来更暗。这可以通过使用CSS应用滤镜效果到图像来实现，这些效果可以根据需要生成所需的深度。

方法

有多种使用CSS加深图像的方法，包括：

滤镜属性
使用半透明颜色叠加

现在让我们详细看看每种方法的示例。

方法1：滤镜属性

使用CSS加深图像的第一种方法是使用”滤镜属性”。CSS滤镜功能是最基本和广泛使用的加深图像的方法之一。此属性允许您向图像添加多种效果，如亮度和对比度。要加深图像，请使用”亮度”滤镜，并将值设置为小于100。

在这里，我们将通过一个示例来实现这种方法-

<!DOCTYPE html>
<html>
<head>
   <title>Darken Image using CSS filter property</title>
   <style>
      .darken-image {
         filter: brightness(100%);
      }
   </style>
</head>
<body>
   <img src="https://images.unsplash.com/photo-1679872996070-7903e943d24a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" class="darken-image">
</body>
</html>

方法2：使用半透明颜色叠加

使用CSS将图片变暗的第二种方法是使用「使用半透明颜色叠加」。创建一个带有背景颜色的第二个div元素，并调整其不透明度以达到适当的暗度。

下面是一个示例来实现这种方法：

<!DOCTYPE html>
<html>
<head>
   <title>Darken Image using CSS overlay with semi-transparent color</title>
   <style>
      .darken-image {
         position: relative;
         display: inline-block;
      }
      .darken-image img {
         display: block;
      }
      .darken-image .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
      }
   </style>
</head>
<body>
   <div class="darken-image">
      <img src="https://cdn.pixabay.com/photo/2022/06/27/18/56/grass-7288141__340.jpg">
      <div class="overlay"></div>
   </div>
</body>
</html>