一文搞懂css中精灵图如何使用
文章目录
- 前言
- 一、精灵图是什么？
-
- 1.概念：
- 2.图片示例：
- 二、为什么使用精灵图？
-
- 1.用户体验而言：
- 2.就开发者而言：
- 3.就服务器而言：
- 三、怎样使用精灵图
-
- 1.background-position
-
- 代码示例：
- 效果展示：
- 2.测量精灵图偏移的方法
-
- 最朴素的方法：
- 其他方法：
- 总结
前言
今天介绍的是进行web前端页面布局精灵图的使用,包括为什么使用精灵图？怎么使用？
一、精灵图是什么？
1.概念：
精灵图就是有许多很小的图标组成的一个大图，而一个个小图是我们需要用到的。
例如图片中的ABCD…
2.图片示例：
二、为什么使用精灵图？
1.用户体验而言：
在用户使用网页时，首先页面越华丽速度越快越好,如果使用一系列的小图标,
不将所有的小图片全放在一张图片上,页面一旦卡顿,那么只会展示出一部分图
标,会使页面看起来很乱,使用精灵图就是将一部分图标绑定在一起页面卡顿时
页面上什么也没有,一旦有,所有的图画都有,这样就使得页面很整洁。
2.就开发者而言：
开发者将来不会只进行一个网站的开发与维护,可能会开发许多网站,使用多个
网页的图片,但是开发环境（也就是电脑只有一个）,将图片分文件夹进行存放
也会容易搞乱图片的位置,每一块大盒子使用一个精灵图,或者某一功能使用同
一个精灵图，会极大地提高开发体验。
3.就服务器而言：
许多小图标的传输,需要服务器与浏览器交互很多次,即影响用户体验又不安全
这个大图的存在使得浏览器与服务器交互的次数大大缩减（减轻服务器的压力）
三、怎样使用精灵图
1.background-position
这个属性以前讲背景的时候提到过,作用是改变背景图的位置,
现在使用精灵图也是使用这个属性,通过修改这个属性达
到改变精灵图的位置,从而使大图上的小图展示在人的眼前。
代码示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.nav,
.qwe,
.qwe1 {
float: left;
width: 116px;
height: 109px;
background: url(../../下载.jpg) no-repeat;
}
.nav {
background-position: -480px -558px;
}
.qwe {
background-position: -252px -420px;
}
.qwe1 {
background-position: -98px -143px;
}
style>
head>
<body>
<div class="nav">div>
<div class="qwe">div>
<div class="qwe1">div>
body>
html>
效果展示：
2.测量精灵图偏移的方法
最朴素的方法：
在文件资源管理器中右键单击精灵图,点击编辑，在画图软件中点
击左上角的查看。先看你盒子的大小,精灵图的左上角（下标为0,0）
会与你的盒子左上角对齐,所以先找到你要展示的小图然后将鼠标
放在小图的左上角,观察图示中左下角的坐标，将其变成负的填入1
中介绍的属性即可。
其他方法：
网络上有一系列的p图软件也可以进行测量,由于博主不喜欢p图,所以就不进行细细的描述了
推荐TIM自带的截图功能进行测量,也可以使用ps软件进行测量。
总结
精灵图的使用,既方便了开发者,也提高了使用者的使用体验。是一个非常棒的发明,博文中使用的图片源于网络，侵权立删。