css精灵图

为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图

雪碧图切图简单过程：先在ps中打开，然后通过用矩形覆盖原来图标在图片中的位置，查到目标图标大小，设置宽高，通过position调整位置，找到目标图标

示例：这是网上找到的精灵图

1.首先，打开ps，找到打开需要切的图片

2.然后查看窗口选项卡下信息选项是否被选中，这里需要用到信息窗口

接着，我们就会发现主工作区多出一个信息面板

3.选择目标图标，求出图标位移

比如，我们需要一个第一行，第五列的吉他图片
先选择矩形工具

然后画矩形，用矩形把需要切割的图片覆盖掉

这样就可以计算这个图标在图片中的位置（当然你也可以调整矩形透明度，来查看自己画的位置是否有偏差）

这里，我们主要想知道这个图片的长宽有多少，这个图片距离图片最左端位移是多少

当我们鼠标指向我们画的矩形左上角顶点时，信息栏会显示x,y。我们就知道这个图片的位移
我们大致记录下这时候位置x,y.(785,0) 少许有偏差也可以

为什么需要这一点呢？

因为我们要把这张图片移动向左移动x，向上移动y，使该片上这个图片显示在html的背景图片中。比如说在html中，div盒子设置大小为80px*80px,设置背景图片时，默认背景图片左上角和盒子坐上角对齐，图片只有左上角80px*80px能够在盒子里显示出来，剩下部分全部隐藏起来了。这时候，我们只要移动图片让这个图标能够出现在显示区域就可以了。

4.估计出图片长宽

用鼠标就移动到矩形左右两端，x相减就可以得到图标长度，同理宽度也通过上下两端y相减得到的
我们算出来长度大概是80px,宽度大概是80px

5.打开ide，开始写代码

这里我们通过div+css方式展示图片

background-image:这个属性是设置背景图片url()里面代表图片的网络地址或者本地地址

background-position:设置图片初始位移
注意：将我们得到的x,y位移加一个负号，便是现在图片的位置（记得写单位px）

为什么要加负号呢？

把该图片想成是第四项线中，图片位移左移动为负，向下移动为负；向右移动，向上移动为正

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵图</title><style type="text/css">.guitar{width: 80px;height: 80px;background-position: -785px 0px;background-image: url(xu.png);}</style>
</head>
<body><div class="guitar"></div>
</body>
</html>

这是最后的效果图

css精灵图(雪碧图)切图相关推荐

【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
CSS 精灵（雪碧图、精灵图）
学习目标能够说出什么是CSS精灵掌握CSS精灵在实际示案例中的应用概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图 ...
CSS 精灵（雪碧图、精灵图）、滑动门
概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图定位":其实就是把网页中一些背景图片整合到一张图片文件中,再 ...
二、CSS 精灵（雪碧图、精灵图）
- 能够说出什么是CSS精灵 - 掌握CSS精灵在实际示案例中的应用 ### 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
PS-怎么用ps查看精灵图(雪碧图)的位置?
我平时都是用firework,今天用ps测了一下位置. 1.打开ps软件,菜单栏文件–打开–我们的精灵图(雪碧图). 2.选择左侧菜单栏–第一个虚线框 3.选择之后,去选择我们要看位置的区域,之后选择 ...
【前端基础知识】精灵图/雪碧图的实现以及优缺点
精灵图/雪碧图的实现以及优缺点是什么? 为什么?(优点) 如何使用? 是什么? 精灵图也称雪碧图,就是很多张图片放在一张图片上,用户只需请求一张图片就可以拿到所有需要的图片.开发人员利用背景图的位置 ...

css精灵图(雪碧图)切图