为什么使用雪碧图
[摘要]
CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率。
CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中,并使用css属性background进行调用。这样的话,当页面渲染时,可以减少请求次数,在一定程度上能够加快网页加载速度。
这并不是什么新鲜玩意了,但由于将小图整合到一张大图,又要准确的写出所需小图的background-position值,对于很多新手来说比较浪费时间,很多人只能放弃这个比较繁琐的步骤。
今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率。
软件下载地址
点我下载 提取密码 hu90
雪碧图-优缺点
CSS Sprites 的优点:
-
减少图片的字节
-
减少了网页的http请求,从而大大的提高了页面的性能
-
减少命名难的问题
CSS Sprites 的缺点:
-
在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景。
-
在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,很容易出现背景断裂。
-
CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的CSS,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。
提示:
background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像background-image。
pc端 使用案例
下载css sprite工具并使用工具合同雪碧图
导出cssSprite.css
.img {
background: url(../imgs/img.png) no-repeat;
display: inline-block;
}
.auth {
height: 49px;
width: 41px;
background-position: 0 0;
}