原文链接:https://www.mk2048.com/blog/blog.php?id=h1b210j&title=%E4%BB%80%E4%B9%88%E6%98%AFcss+sprites%EF%BC%8C%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%EF%BC%9F
版权
前端专栏收录该内容
2068 篇文章1 订阅
订阅专栏
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量
优点:
1、减少网页的HTTP请求,提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点:
1、必须限定容器大小,符合背景图片元素的位置,需要计算
2、维护比较麻烦
使用步骤:
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h1b210j&title=什么是css sprites,如何使用?