首页 > > 网页制作 > css >

什么是css sprites，如何使用？

2018-08-21 05:37:36来源：博客园阅读 ()

css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量

优点：
1、减少网页的HTTP请求，提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点：
1、必须限定容器大小，符合背景图片元素的位置，需要计算
2、维护比较麻烦
使用步骤：
1、制作一张具有多状态的拼合图片，需要按照一定规律处理
2、给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
3、通过背景图定位（background-position）控制不同的显示状态

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有