它基本上是一幅图像, 是将不同图像组合在一起形成一个图像的集合。图像精灵的使用主要有两个原因:
- 由于仅使用单个图像, 因此页面加载速度更快。
- 它减少了用于加载多个图像的带宽。这样, 消耗的数据更少。
二手图片:
文章图片
例子:
<
!DOCTYPE html>
<
html>
<
head>
<
style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 100px;
display: block;
}
.gfg {
width: 100px;
left:0px;
background: url(
'https://media.lsbin.org/wp-content/uploads/icon.png') -0px -0px;
}
.gfg1 {
width: 100px;
left:120px;
background: url(
'https://media.lsbin.org/wp-content/uploads/icon.png') -0px -140px;
}
.gfg2 {
width: 100px;
left:240px;
background: url(
'https://media.lsbin.org/wp-content/uploads/icon.png') -300px -140px;
}
<
/style>
<
/head>
<
body>
<
ul id = "navlist">
<
li class = "gfg">
<
a href = "https://www.lsbin.com/#">
<
/a>
<
/li>
<
li class = "gfg1">
<
a href = "https://www.lsbin.com/#">
<
/a>
<
/li>
<
li class = "gfg2">
<
a href = "https://www.lsbin.com/#">
<
/a>
<
/li>
<
/ul>
<
/body>
<
/html>
【CSS如何使用图像精灵(用法详细示例)】输出如下:
文章图片
推荐阅读
- 软件工程|用户界面设计指南
- Python如何使用OpenCV播放视频(代码实现)
- 算法题(在只有3和4的数字系统中查找第n个数字)
- 如何为ng-repeat指令中的多项选择添加动态选项()
- 亚马逊面试体验| 2020年SDE-1 FTE校园
- Python使用youtube_dl模块下载视频
- PHP Ds\Dequealloc()函数用法示例
- 本图文详细教程教你像手机一样让你的windows10锁屏
- 2017一键安装win10系统安装图文详细教程