前言

今天介绍的是进行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>Document</title><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软件进行测量。

总结

精灵图的使用,既方便了开发者,也提高了使用者的使用体验。是一个非常棒的发明,博文中使用的图片源于网络，侵权立删。

一文搞懂css中精灵图如何使用相关推荐

html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
一文搞懂产品中的搜索设计
搜索功能是我们日常生活中接触最多的功能之一,它更够很好的提高用户使用产品的效率,用户对搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验.本文作者通过分享这篇文章,帮我们搞懂产品中 ...
一文搞懂Java8中表示当前的时间类Date、Instant、LocalDateTime、ZonedDateTime
1. 概述 Java8中的时间类主要有:Date.Instant.LocalDateTime(LocalDate.LocalTime).ZonedDateTime,除去Date,java.time包下 ...
CSS中精灵图的使用
1.精灵图的用途为了有效地减少服务器接收和请求的次数,提高网页的加载速度,因此产生了CSS精灵技术(也称CSS Sprites.CSS雪碧) 原理:把网页中的一些背景图片整合到一张图片文件中, 用b ...
一文搞懂 CSS3 中的渐变到底怎么玩
古之立大事者,不唯有超世之才,亦必有坚忍不拔之志--苏轼写在前面今天在做案例的时候,用到了 CSS3 的渐变,可是用到的时候却发现渐变的语法已经忘了,于是就有了这篇博客. 文章目录写在前面什么 ...
【精选】一文搞懂css三大特性
文章目录前言一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
一文搞懂matplotlib中的颜色设置
欢迎关注"生信修炼手册"! 在matplotlib中,颜色设置有以下多种方式 1. 常用颜色的字母表示及缩写最常用的颜色表示方法,有以下几种常用颜色 1. red,表示红色, ...

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

文章目录

前言

一、精灵图是什么？

1.概念：

2.图片示例：

二、为什么使用精灵图？

1.用户体验而言：

2.就开发者而言：

3.就服务器而言：

三、怎样使用精灵图

1.background-position

代码示例：

效果展示：

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

最朴素的方法：

其他方法：

总结

一文搞懂css中精灵图如何使用相关推荐

最新文章

热门文章