首頁 >web前端 >html教學 >如何使用HTML和CSS刪除填滿顏色以變更影像顏色？

如何使用HTML和CSS刪除填滿顏色以變更影像顏色？

WBOY轉載: 2023-09-10 16:49:061185瀏覽

在 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>

結論

總之，在 HTML 和 CSS 中使用色彩下降效果可以是一種有趣且富有創意的方式，可以增強網站或 Web 應用程式的視覺吸引力。透過在懸停時更改圖像顏色的功能，您可以添加動態元素來吸引用戶的注意力並使您的內容脫穎而出。

在本文中，我們探討了使用顏色滴落效果改變影像顏色的基本原理。我們涵蓋了使用filter屬性來操作影像的灰度，使用:before偽元素來建立疊加效果，以及使用clip-path屬性來建立在懸停時顯示顏色的圓形遮罩。

透過實施此效果，您可以創造更具吸引力的使用者體驗，並為您的網站增添一些個人化。透過一些實驗和創意，您甚至可以將這種技術推向更高級別，創造出更複雜的顏色滴落效果，從而真正脫穎而出。

以上是如何使用HTML和CSS刪除填滿顏色以變更影像顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Filter pointer 内边距 display border 伪元素 flex

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在HTML中合併表格儲存格？下一篇：如何在HTML中合併表格儲存格？

看更多