css sprite 雪碧图

雪碧图的适用场景:静态+小图片+加载量大------>减少http请求

举例说明:


屏幕快照 2018-04-13 下午4.09.42.png

屏幕快照 2018-04-13 下午4.10.11.png
屏幕快照 2018-04-13 下午4.10.36.png

在<i>标签上设置背景,它本身是没有高度的 !!!一定要设置 它的宽度高度!!!display:inline/block 看情况而定

分别对不同的i标签设置 backgroun-position:x y
起点为(0,0)
之后所有的横坐标和纵坐标的值都为负

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 雪碧图的使用场景: 1,静态图片,不随用户信息的变化而变化 ...
    哈哈腾飞阅读 914评论 0 3
  • CSS Sprite技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CS...
    萌三蛋子geocsj阅读 1,452评论 0 3
  • 参考视频地址:CSS Sprite雪碧图应用-慕课网 GitHub:https://github.com/BadW...
    waka阅读 374评论 0 1
  • 雪碧图的使用场景: 不推荐使用雪碧图的地方: css Sprite(雪碧图)的实现原理: 雪碧图的实现方式: 作者...
    LaBaby_阅读 686评论 0 0