「开发小技巧」07—如何使用HTML和CSS创建图像叠加图标?
使用图像覆盖图标可以为你的网站交互细节或一组功能加深印象。本文内容将分为两部分,第一部分创建结构并附加图标的链接。在第二部分中,我们将使用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>
最终输出效果:
「开发小技巧」07—如何使用HTML和CSS创建图像叠加图标?相关推荐
- html border阴影效果_【开发小技巧】026—如何使用HTML和CSS创建浮动框阴影效果?...
英文 | https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp浮动框效果 ...
- excel表格内容拆分_「职场百科书」—「实用小技巧」—(Excel表格拆分)
工作中我们经常会遇到这种情况,所有的数据都整合在一个Excel表格里面了,现在想按需求分别拆分成多个工作表,有什么好办法吗?利用透视表,我们就可以轻松解决. 如下图所示,从销售一部到销售七部的所有业绩 ...
- 10你当前无权访问该文件夹_「文件保密小技巧」教你创建一个别人打不开也无法删除的文件夹...
很多时候,我们电脑里面保存着一些比较隐私的文件,不想让别人看到或者不小心删除,怎么办?有很多办法,比如设置隐藏属性.设置密码等等.但小编要说,保密都是相对的,想要做到绝对保密很难,每种方法都有自己的漏 ...
- html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
- Android 开发小技巧 | 一句命令搞定截屏
-- 作者 谢恩铭 转载请注明出处 一句命令搞定截屏 在安卓开发中, 我们很多时候都要用到截屏这个功能. 有时是为了演示, 有时是为了报告问题(比如在Bugzilla, Jira, Redmine等B ...
- 头条号个人中心登录_头条号平台上线「插入小程序」功能
头条号平台上线「插入小程序」功能,创作者可在图文.小视频和自定义菜单中插入头条小程序,帐号服务能力和变现能力进一步提升. 一.什么是「头条小程序」? 「头条小程序」是为内容生产者提供的延伸变现工具,是 ...
- 关于「微信小程序」背后的故事
前天晚上,小编的朋友圈被一则消息刷屏. 微信要推出应用号,我们暂且叫它小程序. 2021年年初张小龙在微信公开课上的的只言片语引发了大家对Web应用的无限憧憬, 9月21日,它终于诞生了! 作为新媒体 ...
- 【Rust日报】 2019-07-29:关于创建「更小的」Rust的思考
关于创建「更小的」Rust的思考 #rust 官方核心团队成员无船大佬新博文,针对社区中有些人喜欢Rust但还没有真正热爱Rust的人提出的看法「能否创造一个更小化更简单的更易于使用的Rust呢」所做 ...
- 头条号个人中心登录_头条号平台上线「插入小程序」功能 帐号服务变现进一步提升...
头条号平台上线「插入小程序」功能,创作者可在图文.小视频和自定义菜单中插入头条小程序,帐号服务能力和变现能力进一步提升. 一.什么是「头条小程序」? 「头条小程序」是为内容生产者提供的延伸变现工具,是 ...
最新文章
- MyBatis 3在XML文件中处理大于号小于号()的方法(转)
- ubuntu libapache2-mod-php5,ubuntu安装apache2 mysql5 php5
- 华为FusionCloud 云计算解决方案及相关资料下载
- PHPMailer 发送邮件
- 关于 Nuxt.js
- python中对多态和多态性的理解
- pythonlower函数_python中lower函数实现方法及用法讲解
- 童年真的回来了么?《摩尔庄园》手游深度分析
- Android之用PopupWindow实现弹出listview形式菜单
- 文献记录(part16)--Learning Bayesian Network Classifiers: Searching in a Space of Partially ...
- Nginx 实战(一) 集群环境搭建
- 布易般的旅途(一) 像流水一般的生活
- 【图像边缘检测】基于matlab GUI Sobel+Prewitt+Canny算子图像边缘检测(带面板)【含Matlab源码 1045期】
- pdffactory 打印字体_PdfFactory Pro(PDF虚拟打印软件) 中文版分享
- 计划策略(planning strategy)
- 安全星球|盘点最新国内外网络安全资讯
- Excel 添加复选框
- CS 188 Project3(RL) Q7:Epsilon Greedy
- 减轻压力保护脊椎,上学路上更轻松,Deuter多特护脊减负双肩背包体验
- 【软件工程】什么是软件工程