发表于： 2019-03-04 21:51:51
1 823
今天完成的事情：今天是入学日，忙完了入学工作后，接着开始任务七的进度。学习了雪碧图的制作以及用法。
首先解释下CSS Sprites是什么：有称CSS精灵，有称CSS雪碧的，无论叫什么，他的作用就是把网页上很多小图标放到一张图片里面，然后通过CSS里面的background-position来控制每个图片的坐标，这样不但减少http请求，而且还降低了图片的大小，加快图片的加载速度，对前端开发的朋友来说是必备技能。
雪碧图使用场景
1.静态图片，不随用户信息的变化而变化
2.小图片，图片容量比较小
3.加载量比较大
雪碧图使用原理
使用CSS里面的background-position属性来控制背景图的位置，从而在不同处显示所需要的图标。
雪碧图实现方法
完成背景图的拼合（把你所需要展示的小图片整合到一张图上面）
Photoshop手动拼图：在PS里完成所需的背景图，量取每个小图片的尺寸并记录下来，将背景图保存为png格式。
当项目或网站比较大时，用PS逐个量取可能不太现实。这时可以使用Sprites工具自动生成小图片的坐标点。
明天计划的事情：完成任务七，然后把任务总结，深度思考全部完成。
遇到的问题：雪碧图不会使用，一直在看教程如何使用。
收获：通过做了任务七，发现将之前的知识点窜在了一起，用起来更加得心应手，还需要学习新知识，并且熟练应用。
返回列表
评论