CSS Sprites是什么
导读： 为什么要使用Sprites（精灵图）？ 网页通常包含多个图像。这些包括图标，按钮，徽标，相关图片和其他图形。当页面中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器，这可能导致下载时间变慢以及...
为什么要使用Sprites（精灵图）？
网页通常包含多个图像。这些包括图标，按钮，徽标，相关图片和其他图形。当页面中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器，这可能导致下载时间变慢以及带宽使用率过高。
CSSSprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像，用户不下载多个文件，而是下载单个文件并通过偏移文件显示必要的图像（或精灵图）。
这样可以减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。
如何使用CSSSprites（精灵图）？
因为CSSSprites是一张多个图像组合成单个图像，在精灵表中多个图像会被放置在网格状图案里，呈现网状分布。
当需要特定图像（精灵图）时，一般会通过CSSbackground-images属性引用精灵表，在通过CSSbackground-position属性对其进行偏移定位得到所需的精灵图，然后以像素为单位定义精灵图的大小。
使用Sprites（精灵图）的实例
精灵图表：
代码示例：
html代码：
Firefox
Chrome
Explorer
Opera
Safari
css代码：
ul.menu{
list-style-type:none;
width:400px;
}
ul.menuli{
padding:20px5px;
font-size:16px;
float:left;
font-family:"TrebuchetMS",Arial,sans-serif;
}
ul.menulia{
height:50px;
line-height:50px;
display:inline-block;
padding-left:60px;
/*Tosifttextoffthebackground-image*/
color:#3E789F;
background:url(Sprites.png)no-repeat;
/*Asalllinksharethesamebackground-image*/
}
ul.menuli.firefoxa{
background-position:00;
}
ul.menuli.chromea{
background-position:0-100px;
}
ul.menuli.iea{
background-position:0-200px;
}
ul.menuli.safaria{
background-position:0-300px;
}
ul.menuli.operaa{
background-position:0-400px;
}
ul.menuli.firefoxa:hover{
background-position:0-50px;
}
ul.menuli.chromea:hover{
background-position:0-150px;
}
ul.menuli.iea:hover{
background-position:0-250px;
}
ul.menuli.safaria:hover{
background-position:0-350px;
}
ul.menuli.operaa:hover{
background-position:0-450px;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS Sprites是什么
本文地址： https://pptw.com/jishu/664693.html