概述
圖像疊加是兩個圖像或圖標的重疊，其中當光標懸停在第一個圖像上時，一個圖標或圖像顯示在屏幕上，而另一個圖標顯示在屏幕上。因此，要實現此功能，我們應該具備 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">
登錄后復制
第 4 步?? 現在將 font Awesome CDN 鏈接插入到 HTML 文檔的 head 標簽中。 CDN 鏈接如下。
<link rel="stylesheet" >
登錄后復制
第 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" >
<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>
登錄后復制
下面給出的圖像是上述示例的輸出，其中第一張圖像顯示了在瀏覽器中加載上述功能時的輸出，第二張圖像顯示了光標懸停在第一張圖像上時的輸出。因此，當任何用戶將鼠標懸停在給定圖像上時，它會顯示重疊圖像。
結論
此功能用于聯系人簿等應用程序，其中用戶的個人資料顯示在圖像上，當用戶單擊或將鼠標懸停在圖像上時，它會顯示特定個人資料的詳細信息。如果您正在構建此功能，則必須檢查圖像或圖標、靜態圖像和鼠標懸停時顯示的圖像是否應具有相同的尺寸，即寬度和高度相等。
以上就是如何使用HTML和CSS創建圖像疊加圖標的詳細內容，更多請關注www.92cms.cn其它相關文章！
