Css Sprite(优点)
- 减少图片的字节。
- 减少网页的http请求,从而大大的提高页面的性能。
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
实现原理
css background-position
- 控制一个层可显示的区域范围大小,
- 通过一个窗口进行背景图的滑动
总结
将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
参考博客:https://blog.csdn.net/allenyhy/article/details/81484642
参考博客:https://blog.csdn.net/qq_42975998/article/details/88628971