CSS Satyr 图片整合

呜喱的呱呱

于 2023-03-10 22:42:11 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

文章标签： css html5 css3

本文链接：https://blog.youkuaiyun.com/n_j_q/article/details/129454202

文章介绍了将小图片合并成一张大图以减少服务器请求次数和提高页面加载速度的方法，包括使用Photoshop或CSSSatyr工具。合并后的图片应具有透明背景，使用background-position属性进行定位。同时，文章也提到了这种方式的缺点，如维护性差和适应性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将很多小图片合成一张大图，其实在加载图片的时候，如果有9张图片，就要向服务器请求9次。如果想图片整合到一张图上，那么就只用加载一次即可

制作方法：

在ps中新建文件，设置宽度和高度【不宜过大，一般保持整合后的图片在200k以内，后期可以通过修改画布大小，修改画布】，一般是将小图片整合到一张图上

将.psd文件中的图片长按鼠标左键，将图片拖过来保存即可

整合好的图片必须是背景透明的，图片是png或gif

注意修改画布大小：【图像——画布大小——修改即可】其中，有一个选项为定位，意思是将修改的画布大小从那个方向修改，一般是向下和向左，因为这样不需要修改其他已经放好的图片

整合图片的好用工具：

软件：CSS Satyr

使用方法可见：http://t.csdn.cn/YHe1S

将需要整合的图片在软件中摆放好，点击生成——得到两个文件

一个文件是整合好的文件是png格式，背景透明

另一个文件是一个html文件，该文件标注这每一个图片的位置

图片整合的优点：

减少请求服务器的次数

整合后的图片大小要小于所有图片的总大小

增加页面的加载速度

使用方法：使用背景图位置属性 background-position 实现背景图定位技术

<style>
.box{
    width:50px;
    height:50px;
    background:#ccc url(./1.png) no-repeat;//图片默认不平铺
}

.box.renp{
    background-position:-120px -50px;
}
</style>

<div class='box'></div>
<div class='box renp'></div>
<div class='box'></div>

注意：background-position:-120px -50px;为什么是负值？

因为背景图片显示的是（0,0）位置的图片，因此图片的位置需要向上移动

图片整合的缺点：

比使用单张图片要麻烦

在合并图片的时候，上下左右要留有足够的空间，保证在显示某个图片的时候，其他图片不能显示

适应性差，高分辨率下，如果平铺的图片可能会断裂

定位比较繁琐

可维护性差