如何使用HTML和CSS刪除填滿顏色以變更影像顏色？-html教學-PHP中文網

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 pm 04:49 PM

csshtml修改顏色

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

結論

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

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

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

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

陳述

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

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract