课件1.3.4雪碧图滑动门.pptxVIP

雪碧图、滑动门;课程大纲;一、CSS Sprite（雪碧图） 什么是CSS Sprite CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。 ;CSS Sprite原理 其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。 CSS Sprites优点 1. 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和??用的主要原因； 2. CSS sprites能减少图片的字节，(网络传输以字节为单位 ，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。 3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名 用一句话来概述就是 “CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。”;怎么制作CSS Sprite图 我们程序员一般通过雪碧图生成工具来制作雪碧图;如何使用雪碧生成工具 1.用PS把需要的图切出来 2.打开CssSprite.exe文件 下载地址：/detail/wx247919365/8641795 3.点击左上角按钮打开图片 4.排列图片 可以点击按钮来排列 ，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图 5.是否是手机端 勾选后雪碧图的大小会缩小2倍 6.代码生成 有sass和css两个选项，选择后者。sass是一种CSS预处理语言，能清晰的、结构化的描述文件样式。 7.大图类型要选择png，图片背景色为Transparent透明 ;实例;使用雪碧图完成以下效果;作业： 用媒体查询把之前做的实例，做成自适应的