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）
之后所有的横坐标和纵坐标的值都为负

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

推荐阅读更多精彩内容

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