CSSSprites怎么用

这篇文章主要介绍“CSS Sprites怎么用”，在日常操作中，相信很多人在CSS Sprites怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS Sprites怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都服务器托管，创新互联提供包括服务器租用、成都服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询：13518219792

为什么要使用Sprites（精灵图）？

网页通常包含多个图像。这些包括图标，按钮，徽标，相关图片和其他图形。当页面中加载图像时，浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器，这可能导致下载时间变慢以及带宽使用率过高。

CSSSprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像，用户不下载多个文件，而是下载单个文件并通过偏移文件显示必要的图像（或精灵图）。

这样可以减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。

如何使用CSSSprites（精灵图）？

因为CSSSprites是一张多个图像组合成单个图像，在精灵表中多个图像会被放置在网格状图案里，呈现网状分布。

当需要特定图像（精灵图）时，一般会通过CSSbackground-images属性引用精灵表，在通过CSSbackground-position属性对其进行偏移定位得到所需的精灵图，然后以像素为单位定义精灵图的大小。

使用Sprites（精灵图）的实例

精灵图表：

代码示例：

html代码：

<ulclass="menu">

<liclass="firefox"><ahref="#">Firefox</a></li>

<liclass="chrome"><ahref="#">Chrome</a></li>

<liclass="ie"><ahref="#">Explorer</a></li>

<liclass="opera"><ahref="#">Opera</a></li>

<liclass="safari"><ahref="#">Safari</a></li>

</ul>

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 Sprites怎么用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：CSSSprites怎么用
文章源于：https://www.cdcxhl.com/article44/igihhe.html

成都网站建设公司_创新互联，为您提供响应式网站、域名注册、营销型网站建设、网站改版、网站营销、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联