css-Sprite (雪碧图)

雪碧图的使用场景:

                             1,静态图片,不随用户信息的变化而变化

                             2,小图片,图片容量比较小

                            3,加载量比较大

             为什么要用雪碧图:有效的减少http请求数量,加速内容显示;

             为什么说减少http请求,可以加速内容显示

             每请求一次,就会和服务链接一次,建立链接需要额外时间的

           可以尽量减少http请求的数量,达到优化的效果

不推荐使用雪碧图的地方:

                  一些大图不建议拼成雪碧图  如果用大图拼成雪碧图的话,加载的慢,反而达不到显示快的效果

css Sprite(雪碧图)的实现原理:

            通过css background-position这个属性来控制的,通常来讲我们设置一个区域的背景图,然后来控制背景图的位置,来实现这个功能

            拼合背景图的小图(x,y)为负值,以左上角的顶点为(0,0)坐标的,当我们需要对坐标系中一个区域进行展示的时候。

雪碧图的实现方式:

         PS手动拼图(小的网站,自己可以动手拼图)

        使用sprite工具自动生成(大型网站)

         CSS sprite 自动生成工具------CssGaga是windows环境下,快速生成雪碧图的工具,这款工具除了帮我们生成雪碧图之外,还会把background-position的代码写好

         网上有安装和配置都有(需要大量的配置,说明很详细)样式

          注意:每个标签都有自己默认的margin和padding;每次都要清除默认样式的原因,自己设置样式的原因是,保证在各个浏览器下的展示效果相同。

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

相关阅读更多精彩内容

  • CSS Sprite技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CS...
    萌三蛋子geocsj阅读 5,298评论 0 3
  • 参考视频地址:CSS Sprite雪碧图应用-慕课网 GitHub:https://github.com/BadW...
    waka阅读 2,958评论 0 1
  • What's CSS Sprite CSS Sprite是网页处理图片的一种方式。它允许你将网页中会使用到各种零星...
    居客侠阅读 3,663评论 0 0
  • 雪碧图的使用场景: 不推荐使用雪碧图的地方: css Sprite(雪碧图)的实现原理: 雪碧图的实现方式: 作者...
    LaBaby_阅读 3,971评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,741评论 32 459

友情链接更多精彩内容