如何使用HTML和CSS通过填充颜色来改变图像颜色

在网页开发的世界中，了解最新的CSS和HTML技术，为网站添加令人惊叹的视觉效果至关重要。其中之一就是“颜色下降效果”，它允许您通过向图像上添加填充颜色来在悬停时改变图像的颜色。

通过这种效果，您可以使您的网站对访问者更具交互性和吸引力。在本文中，我们将通过使用HTML和CSS创建颜色下降效果的过程来引导您。因此，无论您是初学者还是经验丰富的网页开发人员，请继续关注学习这个令人兴奋的视觉效果。

什么是下降填充颜色效果

下降填充颜色效果是使用HTML和CSS应用于图像或图形的一种视觉效果，当鼠标悬停在图像上时，图像上出现一滴颜色，从而导致图像改变颜色。

此效果营造了一滴颜色落到图像上并在图像上扩散的错觉，形成了戏剧性和动态的效果。这种效果可以用于为网站增加互动性和视觉趣味性，使其对用户更具吸引力。

要实现此效果，我们必须使用某些属性，让我们逐个看一下：

filter属性 - 在CSS中，filter属性用于对元素的内容应用视觉效果。它允许您使用各种滤镜函数调整图像和其他图形元素的外观。

filter属性可以采用一个或多个滤镜函数，按顺序应用这些函数。有许多不同的滤镜函数可用，每个函数应用不同类型的视觉效果。

clip-path属性 - clip-path CSS属性用于创建剪辑路径，剪辑路径是定义元素可见区域的非矩形区域。该属性用于隐藏超出剪辑路径范围的元素的部分内容，实现以前只能通过图像遮罩或SVG实现的复杂形状和效果。
::before伪元素 - CSS中的::before伪元素会在元素的内容之前插入一个虚拟元素。它用于在元素之前插入内容，而无需添加任何额外的HTML标记。

::before伪元素的一个常见用途是在元素之前添加装饰性内容，例如图标或形状。 ::before伪元素还可以用于添加文本、背景图像和其他内容。

需要遵循的步骤

以下是本示例中的步骤：

步骤1 - 使用 .icon-container div创建一个包含图标/图片的容器。将所有元素的盒模型设置为border-box，并将所有元素的边距和内边距设置为0。
步骤2 - 然后将 body 元素设置为 display: flex ，并使用 justify-content: center 和 align-items: center 将容器元素在页面上垂直水平居中对齐。将 body 元素的背景颜色设置为深灰色 (#333) 。
步骤3 - 接下来，我们需要样式化具有颜色下落效果的容器元素。给它一个相对位置、宽度和高度为200像素，并设置一个居中覆盖整个容器元素的背景图像。

使用 filter 属性将背景图像设置为灰度（即黑白），并将 cursor 属性设置为 pointer ，以向用户表示该元素可点击。

步骤4 - 然后，在鼠标悬停时创建颜色下落效果。使用 ::before 伪元素创建一个白色圆圈，在悬停时会被裁剪以显示底层的背景图像。

将 clip-path 属性设置为 circle(0% at 50% 0%) ，从一个裁剪的半径为0%（即没有可见区域）的圆圈开始，位置在容器元素的顶部中心。

当元素悬停时， clip-path 属性过渡到 circle(100% at 50% 0%) ，这将创建一个覆盖整个容器元素的圆圈。这个过渡动画的持续时间为0.4秒，使用ease-out时间函数进行动画。

示例

让我们看一个例子 –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title> Color Drop Effect </title>
   <style>
      /* Resetting default styles */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      /* Centering the container */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #333;
      }
      /* Creating the color drop effect */
      .icon-container {
         position: relative;
         width: 200px;
         height: 200px;
         background-image: url('https://via.placeholder.com/200');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         filter: grayscale(100%);
         cursor: pointer;
      }

      .icon-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         clip-path: circle(0% at 50% 0%);
         transition: clip-path 0.4s ease-out;
      }

      .icon-container:hover::before {
         clip-path: circle(100% at 50% 0%);
      }
   </style>
</head>
<body>
   <div class="icon-container"></div>
</body>
</html>