本篇文章主要介绍css中sprites的应用，这是一个很简单的应用，不过在设计中，这样做可以减轻服务器的压力，是请求次数减少，是一个不错的方法。
实例代码如下：
body { font-family: "Lucida Sans", "Lucida Sans Unicode"; font-size: 14px; line-height: 24px; } ul { list-style-type: none; } li { float: left; } a{ background-image: url(bg.gif); height: 26px; background-position: 53px 0px; display: block; margin-right: 10px; width: 53px; text-align: center; color: #333333; } li a:link { text-decoration: none; } li a:visited { text-decoration: none; } li a:hover { text-decoration: none; background-position: 0 0px;//在这里规定从某一坐标开始显示图片}
总结：
在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少，不过有一个问题，就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。
相关推荐：
立即学习“前端免费学习笔记（深入）”；
利用css sprites减少图片请求
DIV+CSS背景一张整图(css sprites)
CSS Sprites技术 zt十天学会web标准(div+css)_html/css_WEB-ITnose
以上就是css中Sprites的应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609928.html
微信扫一扫 
支付宝扫一扫 
