1.精灵图的用途

为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）

原理：把网页中的一些背景图片整合到一张图片文件中, 用backgroun-position等属性进行背景定位

2. 精灵图（sprites）的使用

（1）精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
（2）这个大图片也称sprites精灵图或者雪碧图
（3）移动背景图位置，此时可以background-position移动的距离就是这个目标图片的x和y坐标。
（4）使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

2. 精灵图的优缺点

（1）优点:

1. 减少http请求, 加快网页的加载速度, 提高用户体验
      2.减少图片的体积, 减少字节数
      3. 解决设计师图片命名的烦恼
      4.更换风格方便

（2）缺点:

1. 开发时需要测量, 比较繁琐
      2. 维护的时候麻烦
      3. 精灵图不能随意改变大小和位置
      4. 宽屏高分辨率的屏幕下, 容易出现背景断裂

3. 演示代码

<!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>div{width: 500px;height: 100px;display: flex;background-color: white;justify-content: space-around;margin: 0 auto;}span {
display: flex;
flex-direction: column;
margin-left: 8px;}a{margin-top: 8px;width: 64px;height: 64px;}span:nth-child(1) a{background-image: url(./images/localnav_bg.png);}span:nth-child(2) a{background-image: url(./images/localnav_bg.png);background-position:  0 64px;}span:nth-child(3) a{background-image: url(./images/localnav_bg.png);background-position:  0 128px;}span:nth-child(4) a{background-image: url(./images/localnav_bg.png);background-position:  0 192px;}span:nth-child(5) a {background-image: url(./images/localnav_bg.png);background-position:  0 256px;}</style>
</head><body><div><span><a href="#"></a><span style="margin-left: 1px;">景点.玩乐</span></span><span><a href="#"></a><span>周边游</span></span><span><a href="#"></a><span>美食林</span></span><span><a href="#"></a><span>一日游</span></span><span><a href="#"></a><span style="margin-left: 1px;">当地攻略</span></span></div>
</body></html>

CSS中精灵图的使用相关推荐

html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
一文搞懂css中精灵图如何使用
文章目录前言一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
html中精灵图的使用方法,关于CSS Sprites、CSS精灵的详细解析
原标题:关于CSS Sprites.CSS精灵的详细解析 CSS Sprites简介 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思.在国内习惯成他 ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
html 中精灵图使用
为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此,为了有效 ...
css（精灵图和字体图标）
1. 精灵图(重点) 1.1 为什么需要精灵图为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites.CSS 雪碧). 核心原理: ...
css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...

CSS中精灵图的使用

1.精灵图的用途

2. 精灵图（sprites）的使用

2. 精灵图的优缺点

（1）优点:

（2）缺点:

3. 演示代码

CSS中精灵图的使用相关推荐

最新文章

热门文章

CSS中精灵图的使用

1.精灵图的用途

2. 精灵图（sprites）的使用

2. 精灵图的优缺点

（1） 优点:

（2） 缺点:

3. 演示代码

CSS中精灵图的使用相关推荐

最新文章

热门文章

（1）优点:

（2）缺点: