一.精灵图 Ø 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图 Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度 Ø 例如：需要在网页中展示8张小图片 • 8张小图片分别发送 → 发送8次 • 合成一张精灵图发送 → 发送1次 1.1精灵图的使用步骤 创建一个盒子 通过PxCook量取小图片大小，将小图片的宽高设置给盒子 将精灵图设置为盒子的背景图片 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y 二.背景图片大小
本文介绍了CSS中的精灵图技术，详细阐述了如何利用精灵图减少服务器请求，提高页面加载速度。同时，讲解了背景图片大小的设置，background属性的连写拓展，以及如何实现文字和盒子的阴影效果，最后提到了CSS的过渡效果，为前端开发者提供了实用技巧。
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
