概述
圖像疊加是兩個(gè)圖像或圖標(biāo)的重疊，其中當(dāng)光標(biāo)懸停在第一個(gè)圖像上時(shí)，一個(gè)圖標(biāo)或圖像顯示在屏幕上，而另一個(gè)圖標(biāo)顯示在屏幕上。因此，要實(shí)現(xiàn)此功能，我們應(yīng)該具備 HTML 和 CSS 的基本知識及其過渡和動畫的屬性。因此，為了創(chuàng)建覆蓋層，我們將看到一些有關(guān)創(chuàng)建內(nèi)部覆蓋層圖標(biāo)的示例。
算法
第 1 步 – 在文本編輯器中創(chuàng)建一個(gè) HTML 文件，并在該文件中創(chuàng)建一個(gè) HTML 樣板。
第 2 步?? 現(xiàn)在創(chuàng)建一個(gè) div 容器，其中包含圖像（其中一個(gè)是靜態(tài)圖像）和另一個(gè)圖像圖標(biāo)（將鼠標(biāo)懸停在圖像上時(shí)顯示）。
第 3 步???插入帶有 src 屬性的 img 標(biāo)簽。將圖像鏈接添加到 src 屬性。
<img src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png">
登錄后復(fù)制
第 4 步?? 現(xiàn)在將 font Awesome CDN 鏈接插入到 HTML 文檔的 head 標(biāo)簽中。 CDN 鏈接如下。
<link rel="stylesheet" >
登錄后復(fù)制
第 5 步?? 現(xiàn)在使用 font Awesome 用戶圖標(biāo)類來制作疊加圖像。
<i class="fa fa-user">
登錄后復(fù)制
第 6 步???現(xiàn)在在同一文件夾中創(chuàng)建一個(gè) style.css 文件，并將 style.css 文件鏈接到 HTML 文檔。
<link rel="stylesheet" href="style.css">
登錄后復(fù)制
第 7 步???設(shè)置 HTML 元素的樣式并進(jìn)行樣式設(shè)置，以便將鼠標(biāo)懸停在圖像上時(shí)應(yīng)顯示疊加層。
第 8 步???圖像疊加層已成功創(chuàng)建。
示例
在此示例中，我們使用圖像和 font Awesome 圖標(biāo)創(chuàng)建了圖像疊加層。 font Awesome 用戶圖標(biāo)類是從 font Awesome 庫導(dǎo)入的。因此，為了構(gòu)建此文件，我們在一個(gè)文件夾中創(chuàng)建了兩個(gè)文件，一個(gè)文件包含 index.html，其中包含該功能的骨架部分，另一個(gè)文件是 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>
登錄后復(fù)制
下面給出的圖像是上述示例的輸出，其中第一張圖像顯示了在瀏覽器中加載上述功能時(shí)的輸出，第二張圖像顯示了光標(biāo)懸停在第一張圖像上時(shí)的輸出。因此，當(dāng)任何用戶將鼠標(biāo)懸停在給定圖像上時(shí)，它會顯示重疊圖像。
結(jié)論
此功能用于聯(lián)系人簿等應(yīng)用程序，其中用戶的個(gè)人資料顯示在圖像上，當(dāng)用戶單擊或?qū)⑹髽?biāo)懸停在圖像上時(shí)，它會顯示特定個(gè)人資料的詳細(xì)信息。如果您正在構(gòu)建此功能，則必須檢查圖像或圖標(biāo)、靜態(tài)圖像和鼠標(biāo)懸停時(shí)顯示的圖像是否應(yīng)具有相同的尺寸，即寬度和高度相等。
以上就是如何使用HTML和CSS創(chuàng)建圖像疊加圖標(biāo)的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
