使用图像覆盖图标可以为你的网站交互细节或一组功能加深印象。本文内容将分为两部分，第一部分创建结构并附加图标的链接。在第二部分中，我们将使用CSS进行设计。
创建结构：在本节中，我们将创建一个基本结构，并为这些图标附加Font-Awesome的CDN链接，这些图标将用作悬停时的图标。
“字体真棒”中的图标的CDN链接：
<link rel =” stylesheet” href =““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>
Image Overlay Icon using HTML and CSS
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Image Overlay Icon using HTML and CSS</b>
<div class="img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="Geeksforgeeks">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>
设计结构：在上面内容中，我们创建了将用作图像叠加图标的基本网站的结构。在这部分内容中，我们将设计图像叠加图标的结构。
CSS代码：
<style>
body {
text-align: center;
}
h1 {
color: green;
}
/* Image styling */
img {
padding: 5px;
height: 225px;
width: 225px;
border: 2px solid gray;
box-shadow: 2px 4px #888888;
}
/* Overlay styling */
.overlay {
position: absolute;
top: 23.5%;
left: 32.8%;
transition: .3s ease;
background-color: gray;
width: 225px;
height: 225px;
opacity: 0;
}
/* Overlay hover */
.container:hover .overlay {
opacity: 1;
}
/* Icon styling */
.icon {
color: white;
font-size: 92px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
最终解决方案：这是结合以上两部分内容后的最终代码。它将显示图像叠加图标。
<!DOCTYPE html>
<html>
<head>
<title>
Image Overlay Icon using HTML and CSS
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
text-align: center;
}
h1 {
color: green;
}
/* Image styling */
img {
padding: 5px;
height: 225px;
width: 225px;
border: 2px solid gray;
box-shadow: 2px 4px #888888;
}
/* Overlay styling */
.overlay {
position: absolute;
top: 23.5%;
left: 32.8%;
transition: .3s ease;
background-color: gray;
width: 225px;
height: 225px;
opacity: 0;
}
/* Overlay hover */
.container:hover .overlay {
opacity: 1;
}
/* Icon styling */
.icon {
color: white;
font-size: 92px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Image Overlay Icon using HTML and CSS</b>
<div class="img">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="Geeksforgeeks">
<div class="overlay">
<a href="#" class="icon">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
</body>
最终输出效果：
