在 Web 開發領域，了解最新的 CSS 和 HTML 技術對於為網站添加令人驚嘆的視覺效果至關重要。其中一種效果是“顏色下降效果”，它允許您透過在圖像上放置填充顏色來更改懸停時圖像的顏色。
透過這種效果，您可以讓您的網站對訪客更具互動性和吸引力。在本文中，我們將引導您完成使用 HTML 和 CSS 建立色彩下降效果的過程。因此，無論您是初學者還是經驗豐富的 Web 開發人員，請繼續關注以了解這種令人興奮的視覺效果。
下墜填滿色彩效果是一種使用HTML和CSS套用於影像或圖形的視覺效果，當滑鼠懸停在影像上時，影像上會出現一滴顏色，導致影像改變顏色。
此效果營造了一種色彩滴落在影像上並在其上擴散的幻覺，創造齣戲劇性和動態的效果。這種效果可以用於為網站增加互動性和視覺吸引力，使用戶更加參與其中。
為了實現這種效果，我們必須使用某些屬性，讓我們逐一查看它們 -
Filter 屬性- CSS 中的filter屬性用於將視覺效果套用到元素的內容。它允許您使用各種濾鏡功能調整影像和其他圖形元素的外觀。
filter屬性可以採用一個或多個依序套用的篩選函數。有許多不同的濾鏡功能可用，每個功能都應用不同類型的視覺效果。
clip-path屬性− clip-path CSS屬性用於建立剪輯路徑，即非矩形區域，定義元素的可見區域。此屬性用於隱藏超出剪輯路徑範圍的元素部分，實現先前只能透過影像遮罩或SVG實現的複雜形狀和效果。
::before 偽元素− CSS 中的::before偽元素創造一個在元素內容之前插入的偽元素。它用於在元素之前插入內容，而無需添加任何額外的 HTML 標記。
::before偽元素的一個常見用途是在元素之前添加裝飾內容，例如圖示或形狀。::before偽元素也可以用於添加文字、背景圖像和其他內容。
以下是在此範例中所採取的步驟 -
步驟1- 使用.icon-containerdiv來建立一個圖示/圖片的容器。將頁面上的所有元素套用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的時間函數。
讓我們看一下例子 -
Color Drop Effect
總之，在 HTML 和 CSS 中使用色彩下降效果可以是一種有趣且富有創意的方式，可以增強網站或 Web 應用程式的視覺吸引力。透過在懸停時更改圖像顏色的功能，您可以添加動態元素來吸引用戶的注意力並使您的內容脫穎而出。
在本文中，我們探討了使用顏色滴落效果改變影像顏色的基本原理。我們涵蓋了使用filter屬性來操作影像的灰度，使用:before偽元素來建立疊加效果，以及使用clip-path屬性來建立在懸停時顯示顏色的圓形遮罩。
透過實施此效果，您可以創造更具吸引力的使用者體驗，並為您的網站增添一些個人化。透過一些實驗和創意，您甚至可以將這種技術推向更高級別，創造出更複雜的顏色滴落效果，從而真正脫穎而出。
以上是如何使用HTML和CSS刪除填滿顏色以變更影像顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
