如何使用 CSS 使图片变暗?

cssweb developmentfront end technology更新于 2024/2/15 20:28:17

CSS 是网页开发中一种流行的网页格式化语言。它允许您更改和改善网页上众多组件(包括照片)的外观。

在本文中，我们将讨论使图片变暗，这是一种使照片看起来更具戏剧性或忧郁感的常用方法。在此过程中，图像的亮度和对比度会发生变化，使其看起来更暗。这可以通过在图片上应用滤镜效果来实现，滤镜效果可以定制以生成所需的暗度。

方法

使用 CSS 使图片变暗的方法有很多，包括:-

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

现在让我们通过示例详细了解每种方法。

方法 1:`Filter 属性`

使用 CSS 使图像变暗的第一种方法是使用 `Filter 属性`。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>

方法二:``半透明颜色叠加``

使用 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>