一文搞懂css中精灵图如何使用

也会容易搞乱图片的位置,每一块大盒子使用一个精灵图,或者某一功能使用同

一个精灵图，会极大地提高开发体验。

3.就服务器而言：

---

许多小图标的传输,需要服务器与浏览器交互很多次,即影响用户体验又不安全

这个大图的存在使得浏览器与服务器交互的次数大大缩减（减轻服务器的压力）

三、怎样使用精灵图

===========================================================================

1.background-position

---

这个属性以前讲背景的时候提到过,作用是改变背景图的位置,

现在使用精灵图也是使用这个属性,通过修改这个属性达

到改变精灵图的位置,从而使大图上的小图展示在人的眼前。

代码示例：

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

=“qwe”>

效果展示：

2.测量精灵图偏移的方法

---

最朴素的方法：

在文件资源管理器中右键单击精灵图,点击编辑，在画图软件中点

击左上角的查看。先看你盒子的大小,精灵图的左上角（下标为0,0）

会与你的盒子左上角对齐,所以先找到你要展示的小图然后将鼠标

放在小图的左上角,观察图示中左下角的坐标，将其变成负的填入1

中介绍的属性即可。

其他方法：

网络上有一系列的p图软件也可以进行测量,由于博主不喜欢p图,所以就不进行细细的描述了

推荐TIM自带的截图功能进行测量,也可以使用ps软件进行测量。

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素