資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML 和 CSS 建立影像疊加圖示
概述
影像疊加是指兩個影像或圖示的重疊，其中一個圖示或影像顯示在螢幕上，而當游標懸停在第一個影像上時，另一個圖示顯示在螢幕上。因此，為了實現此功能，我們應該具備 HTML 和 CSS 的基本知識，以及其過渡和動畫屬性。因此，為了建立疊加層，我們將看到一些關於建立內部疊加圖示的示例。
演算法
步驟 1 − 在您的文字編輯器中建立一個 HTML 檔案，並在檔案中建立一個 HTML 基本結構。
步驟 2 − 現在建立一個 div 容器，其中包含兩個影像，一個是靜態的，另一個是懸停在影像上時將顯示的影像圖示。
步驟 3 − 插入 img 標籤併為其新增 src 屬性。將影像連結新增到 src 屬性。
<img src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png">
步驟 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，其中包含該功能的樣式和主要工作原理。
<html>
<head>
<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">
<title>image overlay</title>
<style>
body{
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.overlayCont {
position: relative;
max-width: 300px;
border-radius: 5px;
}
img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 0 5px grey;
border-radius: 8px;
}
.fa {
color: white;
font-size: 10rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.fa:hover {
color: #eee;
}
.hoverIcon{
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s all ease;
background-color: green;
border-radius: 8px;
}
.overlayCont:hover .hoverIcon{
opacity: 1;
}
h3{
color: white;
font-weight: 700;
font-family: 'Segoe UI';
text-align: center;
}
</style>
</head>
<body>
<div class="overlayCont">
<img src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png">
<div class="hoverIcon">
<h3>tutorialspoint.com</h3>
<i class="fa fa-user"></i>
</div>
</div>
</body>
</html>
下面給出的影像是在瀏覽器中載入上述功能時輸出的示例，其中第一個影像顯示了輸出，第二個影像顯示了當游標懸停在第一個影像上時輸出的內容。因此，當任何使用者將滑鼠懸停在給定的影像上時，它會顯示一個疊加影像。
結論
此功能用於聯絡人簿等應用程式中，其中使用者的個人資料顯示在影像上，當用戶單擊或將滑鼠懸停在影像上時，它會顯示特定個人資料的詳細資訊。如果您正在構建此功能，則必須檢查靜態影像和滑鼠懸停時顯示的影像（兩個影像或圖示）的大小是否相同，這意味著寬度和高度相等。
3K+ 次檢視
