CSS-sprite(雪碧图、精灵图)

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

猜你喜欢

转载自www.cnblogs.com/nayek/p/11962532.html