如何使用HTML和CSS刪除填充顏色以更改圖像顏色？-魔扣目錄

在 Web 開發領域，了解最新的 CSS 和 HTML 技術對于向網站添加令人驚嘆的視覺效果至關重要。其中一種效果是“顏色下降效果”，它允許您通過在圖像上放置填充顏色來更改懸停時圖像的顏色。

通過這種效果，您可以使您的網站對訪問者更具互動性和吸引力。在本文中，我們將指導您完成使用 HTML 和 CSS 創建顏色下降效果的過程。因此，無論您是初學者還是經驗豐富的 Web 開發人員，請繼續關注以了解這種令人興奮的視覺效果。

什么是Drop Fill Color Effect？

下落填充顏色效果是一種使用HTML和CSS應用于圖像或圖形的視覺效果，當鼠標懸停在圖像上時，圖像上會出現一滴顏色，導致圖像改變顏色。

該效果營造了一種色彩滴落在圖像上并在其上擴散的幻覺，創造出戲劇性和動態的效果。這種效果可以用于為網站增加互動性和視覺吸引力，使用戶更加參與其中。

為了實現這種效果，我們必須使用某些屬性，讓我們逐個查看它們 –

Filter 屬性 – CSS 中的 filter 屬性用于將視覺效果應用于元素的內容。它允許您使用各種過濾器功能調整圖像和其他圖形元素的外觀。

filter 屬性可以采用一個或多個按順序應用的過濾器函數。有許多不同的過濾器功能可用，每個功能都應用不同類型的視覺效果。

clip-path屬性 ? clip-path CSS屬性用于創建剪輯路徑，即非矩形區域，定義元素的可見區域。該屬性用于隱藏超出剪輯路徑范圍的元素部分，實現以前只能通過圖像遮罩或SVG實現的復雜形狀和效果。

::before 偽元素 ? CSS 中的 ::before 偽元素創建一個在元素內容之前插入的偽元素。它用于在元素之前插入內容，而無需添加任何額外的 HTML 標記。

::before 偽元素的一個常見用途是在元素之前添加裝飾內容，例如圖標或形狀。 ::before 偽元素還可以用于添加文本、背景圖像和其他內容。

應遵循的步驟

以下是在此示例中所采取的步驟 –

步驟1 – 使用.icon-container div來創建一個圖標/圖片的容器。將頁面上的所有元素應用box-sizing: border-box，并將所有元素的邊距和內邊距設置為0。

第 2 步 – 然后將 body 元素設置為 display: flex 以及 justify-content: center 和 align-items: center 將容器元素在頁面上垂直和水平居中。 body 元素的背景顏色設置為深灰色(#333)。

步驟 3 ? 接下來，我們需要為具有顏色下落效果的容器元素添加樣式。它被賦予了相對定位，寬度和高度為200像素，并且有一個居中且覆蓋整個容器元素的背景圖像。

filter屬性用于將背景圖像設置為灰度（即黑色和白色），cursor屬性設置為pointer b> 向用戶表明該元素是可點擊的。

第四步 – 然后，我們在懸停時創建顏色下降效果。使用::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>

登錄后復制