为何要运用Sprites(精灵图)?
网页平常包含多个图象。这些包含图标,按钮,徽标,相干图片和其他图形。当页面中加载图象时,浏览器向服务器发出HTTP要求。离别加载每一个图象须要屡次挪用HTTP服务器,这能够致使下载时候变慢以及带宽运用率太高。
CSS Sprites会将多个图象组合成一个称为精灵表或拼贴图的单个图象,用户不下载多个文件,而是下载单个文件并经由过程偏移文件显现必要的图象(或精灵图)。
如许能够削减对服务器的挪用、削减显现网页所需的下载次数,节约带宽并收缩用户端的下载时候,削减收集堵塞。
怎样运用CSS Sprites(精灵图)?
由于CSS Sprites是一张多个图象组合成单个图象,在精灵表中多个图象会被安排在网格状图案里,显现网状散布。
当须要特定图象(精灵图)时,平常会经由过程CSS background-images属性援用精灵表,在经由过程CSS background-position属性对其举行偏移定位获得所需的精灵图,然后以像素为单元定义精灵图的大小。
运用Sprites(精灵图)的实例
精灵图表:
代码示例:
html代码:
<ul class="menu"> <li class="firefox"><a href="#">Firefox</a></li> <li class="chrome"><a href="#">Chrome</a></li> <li class="ie"><a href="#">Explorer</a></li> <li class="opera"><a href="#">Opera</a></li> <li class="safari"><a href="#">Safari</a></li> </ul>
css代码:
ul.menu { list-style-type: none; width: 400px; } ul.menu li { padding:20px 5px; font-size: 16px; float: left; font-family: "Trebuchet MS", Arial, sans-serif; } ul.menu li a { height: 50px; line-height: 50px; display: inline-block; padding-left: 60px; /* To sift text off the background-image */ color: #3E789F; background:url(Sprites.png) no-repeat; /* As all link share the same background-image */ } ul.menu li.firefox a { background-position: 0 0; } ul.menu li.chrome a { background-position: 0 -100px; } ul.menu li.ie a { background-position: 0 -200px; } ul.menu li.safari a { background-position: 0 -300px; } ul.menu li.opera a { background-position: 0 -400px; } ul.menu li.firefox a:hover { background-position: 0 -50px; } ul.menu li.chrome a:hover { background-position: 0 -150px; } ul.menu li.ie a:hover { background-position: 0 -250px; } ul.menu li.safari a:hover { background-position: 0 -350px; } ul.menu li.opera a:hover { background-position: 0 -450px; }
效果图:
当鼠标悬停到一个精灵图上时:
动态效果:
总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。
以上就是CSS Sprites是什么的细致内容,更多请关注ki4网别的相干文章!