CSS中精灵图的使用

1.精灵图的用途

为了有效地减少服务器接收和请求的次数,提高网页的加载速度,因此产生了CSS精灵技术(也称CSS Sprites、CSS雪碧)

原理:把网页中的一些背景图片整合到一张图片文件中, 用backgroun-position等属性进行背景定位

2. 精灵图(sprites)的使用

(1)精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
(2)这个大图片也称sprites精灵图或者雪碧图
(3)移动背景图位置,此时可以background-position移动的距离就是这个目标图片的x和y坐标。
(4)使用精灵图的时候需要精确测量,每个小背景图片的大小和位置

2. 精灵图的优缺点

(1) 优点:

      1. 减少http请求, 加快网页的加载速度, 提高用户体验
      2.减少图片的体积, 减少字节数
      3. 解决设计师图片命名的烦恼
      4.更换风格方便

(2) 缺点:

      1. 开发时需要测量, 比较繁琐
      2. 维护的时候麻烦
      3. 精灵图不能随意改变大小和位置
      4. 宽屏高分辨率的屏幕下, 容易出现背景断裂

3. 演示代码





    
    
    
    Document
    



    
景点.玩乐 周边游 美食林 一日游 当地攻略

你可能感兴趣的:(前端,html,css)