0
点赞
收藏
分享

微信扫一扫

【开发小技巧】07—如何使用HTML和CSS创建图像叠加图标?

爱薇Ivy趣闻 2022-09-28 阅读 67

【开发小技巧】07—如何使用HTML和CSS创建图像叠加图标?_ico

英文 | ​​https://www.geeksforgeeks.org/how-to-create-an-image-overlay-icon-using-html-and-css/?ref=leftbar-rightbar​​

翻译 | web前端开发(web_qdkf)


使用图像覆盖图标可以为你的网站交互细节或一组功能加深印象。本文内容将分为两部分,第一部分创建结构并附加图标的链接。在第二部分中,我们将使用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>

</html>

最终输出效果:

【开发小技巧】07—如何使用HTML和CSS创建图像叠加图标?_ico_02


【开发小技巧】07—如何使用HTML和CSS创建图像叠加图标?_html_03

【开发小技巧】07—如何使用HTML和CSS创建图像叠加图标?_css_04

举报

相关推荐

0 条评论