CSS Sprite

雪碧图的优点

减少了HTTP请求的数目,内容显示更快。

使用雪碧图的场景

  1. 静态图片,不随时间变化。
  2. 小图片,图片容量小。
  3. 加载量大

实现原理

利用CSS的background-position属性控制背景图的位置。左上角为原点(0,0),偏移量要设置为负值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 雪碧图的使用场景: 1,静态图片,不随用户信息的变化而变化 ...
    哈哈腾飞阅读 4,442评论 0 3
  • CSS Sprite技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CS...
    萌三蛋子geocsj阅读 5,298评论 0 3
  • 先上个原理图 css-sprite就是把很多张图合并在一张图内,我们就是要用background-position...
    火星X王子阅读 3,237评论 0 0
  • What's CSS Sprite CSS Sprite是网页处理图片的一种方式。它允许你将网页中会使用到各种零星...
    居客侠阅读 3,663评论 0 0
  • [css sprite原理优缺点及使用] CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方...
    LabRaDor2079阅读 5,488评论 0 3

友情链接更多精彩内容