长沙做网站设计公司,网站友链外链,陕西网站建设陕icp备,河南省建设厅官网查询百度词条对雪碧图的解释是#xff1a;CSS雪碧 即CSS Sprite#xff0c;也有人叫它CSS精灵#xff0c;是一种CSS图像合并技术#xff0c;该方法是将小图标和背景图像合并到一张图片上#xff0c;然后利用css的背景定位来显示需要显示的图片部分。
举个应用的实例#xff…百度词条对雪碧图的解释是CSS雪碧 即CSS Sprite也有人叫它CSS精灵是一种CSS图像合并技术该方法是将小图标和背景图像合并到一张图片上然后利用css的背景定位来显示需要显示的图片部分。
举个应用的实例这是淘宝网的分类导航实例每个目录的前面都会有一个图标实现这个图标的方法有两种一种是直接使用image标签对每个需要图标的地方都设置一个image标签这种方法的缺点是需要很多的请求来获取图片因为每一个image都是请求回来的如果少量的图标的还好如果很多的话体验会受到影响。另一种的就是利用css雪碧图的形式来制作把所有图标都放到一个图片上请求的时候只请求这个图片在需要显示图标的地方开一个小小的口显示图标的范围通过对背景图片的background-position来进行定位最后把需要的图标刚好对准这个口就好了。
实现原理CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染这也就意味着你的标签变得更加复杂了图片是在CSS中定义而非img标签。 优点 减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标方便在任何位置使用这样不同位置的请求只需要调用一个图片从而减少对服务器的请求次数降低服务器压力同时提高了页面的加载速度节约服务器的流量。 提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表而单独分割的每一张 GIF 都有自己的一个色表这就增加了总体的大小。因此单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
html
head
meta http-equivContent-Typecontenttext/html; charsetutf-8/
styleh3 ul{
margin: 0;
padding: 0;
}
h3 {display: block;margin: 0;padding: 0;
}.cat {position: relative;width: 150px;background: #f8f8f8;border: 1px solid #bbb;
}ol, ul {list-style: none;
}li {z-index: 2;position: relative;display: block;height: 31px;line-height: 31px;overflow: hidden;margin: 1px 10px 0;vertical-align: bottom;border-bottom: 1px solid #dedede
}li:hover{background-color:#666666;
}li h3 {font-size: 14px;font-weight: 400;
}li i {display: inline;float: left;margin: 3px 10px 0 0;height: 24px;width: 30px
}/* 在这里补充雪碧图的样式 */lii{background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
}.cat-2i{background-position:0 -24;
}
.cat-3i{background-position:0 -48;
}
.cat-4i{background-position:0 -72;
}
.cat-5i{background-position:0 -96;
}
.cat-6i{background-position:0 -120;
}
.cat-7i{background-position:0 -144;
}
.cat-8i{background-position:0 -168;
}/style
/head
bodydiv classcatul li classcat-1i/ih3服装内衣/h3/lili classcat-2i/ih3鞋包配饰/h3/lili classcat-3i/ih3运动户外/h3/lili classcat-4i/ih3珠宝手表/h3/lili classcat-5i/ih3手机数码/h3/lili classcat-6i/ih3家电办公/h3/lili classcat-7i/ih3护肤彩妆/h3/lili classcat-8i/ih3母婴用品/h3/li/ul/div
/body
/html
