CSS精灵技术(sprite) |
您所在的位置:网站首页 › 关于网页背景错误的描述是什么 › CSS精灵技术(sprite) |
精灵技术产生的背景
图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。 精灵技术本质简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图(雪碧图),如下图所示为京东网站中的一个精灵图。 精灵技术的使用CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。 精灵大图原图 精灵图的使用小案例1 Document h3 { background: url(images/index.png) no-repeat -2px -184px; width: 26px; height: 26px; } div { width: 236px; height: 106px; background: url(images/index.png) no-repeat 0 -350px; } 案例结果图 精灵图的使用小案例2 :拼出自己的名字精灵图大图原图 Document span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .aa { width: 108px; height: 110px; background-position: 0 -9px; } .n { width: 112px; height: 110px; background-position: -255px -276px; } .d { width: 97px; height: 107px; background-position: -363px -8px; } .y { width: 110px; height: 110px; background-position: -367px -556px; } 案例结果图制作精灵图 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。 大部分情况下,精灵图都是网页美工做。 我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。 我们精灵图的宽度取决于最宽的那个背景。 我们可以横向摆放也可以纵向摆放,但是每个图片之间,间隔至少隔开偶数像素合适。 在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。结束语: 小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |