如何使用HTML和CSS建立影像疊加圖標

概述

圖像疊加是兩個圖像或圖示的重疊，其中當遊標懸停在第一個圖像上時，一個圖標或圖像顯示在螢幕上，而另一個圖標顯示在螢幕上。因此，要實現此功能，我們應該具備 HTML 和 CSS 的基本知識及其過渡和動畫的屬性。因此，為了建立覆蓋層，我們將看到一些有關建立內部覆蓋層圖示的範例。

演算法

第 1 步 - 在文字編輯器中建立一個 HTML 文件，並在該文件中建立一個 HTML 樣板。

第2 步 − 現在建立一個div 容器，其中包含圖像（其中一個是靜態圖像）和另一個圖像圖示（將滑鼠懸停在圖像上時顯示）。

第 3 步 − 插入帶有 src 屬性的 img 標籤。將圖像連結新增至 src 屬性。

<img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="如何使用HTML和CSS建立影像疊加圖標" >

第 4 步驟 − 現在將 font Awesome CDN 連結插入到 HTML 文件的 head 標籤中。 CDN 連結如下。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

第 5 步驟 − 現在使用 font Awesome 使用者圖示類別來製作疊加圖像。

<i class="fa fa-user">

第 6 步 − 現在在同一資料夾中建立一個 style.css 文件，並將 style.css 檔案連結到 HTML 文件。

<link rel="stylesheet" href="style.css">

第 7 步 − 設定 HTML 元素的樣式並進行樣式設置，以便將滑鼠停留在圖像上時應顯示疊加層。

第 8 步 − 影像疊加層已成功建立。

範例

在這個範例中，我們使用圖像和 font Awesome 圖示建立了圖像疊加層。 font Awesome 使用者圖示類別是從 font Awesome 資料庫匯入的。因此，為了建立此文件，我們在一個資料夾中建立了兩個文件，一個文件包含index.html，其中包含該功能的骨架部分，另一個文件是style.css，其中包含該功能的樣式和主要工作。

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
   
   


   

      <img  src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png" alt="如何使用HTML和CSS建立影像疊加圖標" >
      

         
tutorialspoint.com
         
      
   

下面給出的圖像是上述範例的輸出，其中第一張圖像顯示了在瀏覽器中加載上述功能時的輸出，第二張圖像顯示了遊標懸停在第一張圖像上時的輸出。因此，當任何使用者將滑鼠懸停在給定圖像上時，它會顯示重疊圖像。

結論

此功能用於聯絡人簿等應用程序，其中用戶的個人資料顯示在圖像上，當用戶單擊或將滑鼠懸停在圖像上時，它會顯示特定個人資料的詳細資訊。如果您正在建立此功能，則必須檢查圖像或圖示、靜態圖像和滑鼠懸停時顯示的圖像是否應具有相同的尺寸，即寬度和高度相等。

以上是如何使用HTML和CSS建立影像疊加圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！