码迷,mamicode.com
首页 > Web开发 > 详细

CSS中的sprites

时间:2018-08-07 22:56:35      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:原则   格式   出现   导致   背景图片   坐标计算   tom   col   请求   

CSS的sprites(雪碧图,精灵图)          *三个名字都要记住

定义:就是将界面上需要的小的导航按钮图标,小图标整合成一张背景图片

           然后用background-position来实现背景图片的定位

优点:1.通过整合减少图片数量从而减少对服务器的请求次数

           2.整合图片来减少图片体积

 

图片整合的原则

1. 边切图边整合

2.定位时避免出现bottom,left等属性(因为图片增大时会导致定位位置错误),要用具体的数值来进行定位

3.要给小图标留出走够的空间(防止因为空间过小,其他图片出现在本区域内),一般将小图标放到图片最右侧

4.单张整合好的图片大小应该在100KB以内

5.按照分类来整合图片

6.为了方便计算尺寸,将sprites图的坐标计算成整数倍

7.整合好的图片背景要透明(保存成png或者gif格式)

 

CSS中的sprites

标签:原则   格式   出现   导致   背景图片   坐标计算   tom   col   请求   

原文地址:https://www.cnblogs.com/suihang/p/9439939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!