CSS Sprites怎么用

这篇文章主要介绍“CSS Sprites怎么用”，在日常操作中，相信很多人在CSS Sprites怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS Sprites怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
　　为什么要使用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;
　　}到此，关于“CSS Sprit免费云主机域名es怎么用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 微信小程序怎么实现在地图上多地点标识

这篇文章主要介绍了微信小程序怎么实现在地图上多地点标识的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序怎么实现在地图上多地点标识文章都会有所收获，下面我们一起来看看吧。以下是具体做法： wxml js hospitalDa…