建设做网站,淮南网上房地产,网站建设编辑,安徽建站模板sprites是鬼怪#xff0c;小妖精#xff0c;调皮鬼的意思#xff0c;初听这个高端洋气的名字我被震慑住了#xff0c;一步步掀开其面纱后发觉非常easy的东西。作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片#xff08;非常多图标文件#xff09;做… sprites是鬼怪小妖精调皮鬼的意思初听这个高端洋气的名字我被震慑住了一步步掀开其面纱后发觉非常easy的东西。作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片非常多图标文件做成按规律排列的一张大图上在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。 JqueryUI的效果图例如以下 非常多页面经常使用的小图标。可是我们看看每一个小图标的源代码的时候会发现这些小图标的src是同一个文件。都是这张大图 为什么要使用CSSSprites 姑且先无论这是怎么实现的我们先来了解一下又好好的方法它不用为什么要用这样的怪异的方式在代码书写和可读性上都有了一定程度的开销。这么干有什么优点能让人们放弃安逸的做法来用CSS sprites呢 浏览器载入图片为堵塞形式 我们知道浏览器在载入网页的时候图片文件及外部的JS、CSS文件都须要单独下载但JS是阻塞HTML下载进程的图片是另外开启进程来下载的不同的浏览器同一时候下载图片的数量的限制一般为一个或者五个或者十个所以假设一个遍布了图片的网页或者一系列网页即使你网速再快也要分批次的下载这些图片。 图片下载为一次完整的http请求 每一个图片的下载都是一次完整的HTTP请求-响应。而把非常多小图片集中到一张图片上这样在仅仅须要一个HTTP请求-响应在如今网速条件下不超过200k的图片下载速度是差点儿相同的下载一次之后不管是该页面还是网站其他页面使用包括在这张大图上的图片的时候就能够使用缓存不会带来重复下载的开销。所以仅仅有一个HTTP请求-响应。 Sprites降低HTTP请求 所以使用CSS sprites最大的优点就是降低HTTP请求加快站点响应速度提高站点性能。或许会问多几个HTTP请求真的会那么严重吗假设使用一张大图那么非常可能大图中有几个图片用不到。这不是多载入内容了吗。和多几次HTTP请求开销差距有那么大吗 CSS Sprites实现 首先了解一下CSS的 background-position background-position设置或检索对象的背景图像位置。必须先指定 background-image属性。 语法 background-position: length || length background-position: position || position 取值 length :百分数 |由浮点数字和单位标识符组成的长度值。 position :top | center | bottom | left | center |right 如
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }我们看到使用的url为同一个图片知识postion时图片的锁定位置有变动。 小结 CSS Sprites的缺点凡事有利必有弊端。可能有人喜欢有人不喜欢由于每次图片修改都要往这张图片加入内容图片的坐标定位要非常准确会会稍显繁琐。坐标定位要固定为某个绝对值因此会失去如center的一些灵活属性。 CSS Sprites 有长处也有缺点。要不要使用详细要看网页以载入速度为主还是以维护方便easy为主。
