美文网首页
CSS Sprite

CSS Sprite

作者: 云彩上的翅胖 | 来源:发表于2017-02-27 21:28 被阅读0次

雪碧图的优点

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

使用雪碧图的场景

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

实现原理

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

相关文章

  • 每个前端工程师都应该懂的前端性能优化总结:

    采用css雪碧图(css sprite/css图片精灵)技术 采用css雪碧图(css sprite/css图片精...

  • CSS Sprite的相关概念

    原文 博客原文 大纲 1、什么是CSS Sprite2、CSS Sprite的优点3、CSS Sprite的缺点4...

  • 如何利用多种方式制作出ICON

    一、image 一、CSS Sprite 一、Icon Font 一、CSS Icon 一、SVG sprite ...

  • 饥人谷-任务9-2

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 css雪碧图又叫css精灵或css sprite,...

  • CSS常见样式

    CSS Sprite(雪碧图)指什么? 有什么作用 CSS雪碧图 即CSS Sprite,也有人叫它CSS精灵图,...

  • 雪碧图、背景、元素透明

    css sprite(雪碧图|精灵图)指什么?有什么作用? css sprite 是一种CSS图像合并技术,该方法...

  • CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprite 是一种 CSS 图像合并技术...

  • 任务9-2

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧 即CSS Sprite,也有人叫它CS...

  • 任务9-2

    1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite指的是一种CSS图像合并技...

  • CSS常见技巧

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite是一种CSS图像合并技术,该方法...

网友评论

      本文标题:CSS Sprite

      本文链接:https://www.haomeiwen.com/subject/hudtgttx.html