css精灵图(雪碧图)切图

深碍√TFBOYSˉ_ 2022-05-20 09:56 491阅读 0赞

# css精灵图 #

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

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

示例：这是网上找到的精灵图  
![精灵图图片][22081]

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

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

![22084][]

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

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

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

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

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

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

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

**为什么需要这一点呢？**

因为我们要把这张图片移动向左移动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>

这是最后的效果图  
![22263][]

[22081]: /images/20220520/4a6cd90bc376414e9ec3e3102421ce31.png
[22084]: /images/20220520/de69f0b74d9e4ce6a24e99605a8d57e0.png
[22094]: /images/20220520/9c3c2d76ade2490cbf57e5455ceeab79.png
[22099]: /images/20220520/ba16ff11286148779c6920b53434520b.png
[22105]: /images/20220520/b79e1f755776429caef363dffb1ccc04.png
[22176]: /images/20220520/320b12ca055f45c1bcd298305bd9f502.png
[22263]: /images/20220520/40c92196d18a44eeb01bc311e35407a9.png