本文摘自PHP中文网,作者青灯夜游,侵删。
CSS Sprites是一种性能优化技术,是一种将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能,也被称为css精灵图。
CSS Sprites是一种性能优化技术,是一种将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能;也被称为css 精灵图。
为什么要使用Sprites(精灵图)?
网页通常包含多个图像。这些包括图标,按钮,徽标,相关图片和其他图形。当页面中加载图像时,浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器,这可能导致下载时间变慢以及带宽使用率过高。
CSS Sprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像,用户不下载多个文件,而是下载单个文件并通过偏移文件显示必要的图像(或精灵图)。
这样可以减少对服务器的调用、减少呈现网页所需的下载次数,节省带宽并缩短用户端的下载时间,减少网络拥塞。
如何使用CSS Sprites(精灵图)?
因为CSS Sprites是一张多个图像组合成单个图像,在精灵表中多个图像会被放置在网格状图案里,呈现网状分布。
当需要特定图像(精灵图)时,一般会通过CSS background-images属性引用精灵表,在通过CSS background-position属性对其进行偏移定位得到所需的精灵图,然后以像素为单位定义精灵图的大小。
使用Sprites(精灵图)的实例
精灵图表:
代码示例:
html代码:
1 2 3 4 5 6 7 | < 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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 ;
color : #3E789F ;
background : url (Sprites.png) no-repeat ;
}
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是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么设置字体阴影
ie css背景图片不显示怎么办
css图片不让选中状态如何实现
css怎么固定底部不动
position属性有哪些
css如何让div隐藏
css中resize属性有什么用
css什么意思?
css border-bottom-color属性怎么用?
css background-attachment属性怎么用
更多相关阅读请进入《Sprites》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS Sprites是什么