码迷,mamicode.com
首页 > Web开发 > 详细

【HTML+CSS】CSS Sprite雪碧图

时间:2015-06-11 17:11:25      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:css   html   

1. 雪碧图的使用场景

(1). 静态图片,不随用户信息的变化而变化

(2). 小图片,图片容量比较小

(3). 加载量比较大

一些大图不建议拼成雪碧图,例如淘宝网站的导航图片都是使用的雪碧图。


2. 使用雪碧图可以减少http请求数量,加速内容显示。每请求一次,就会和服务器链接一次,建立链接时需要额外时间的。


3. 实现原理

使用background-position属性:

技术分享

需要使用雪碧图的时候,便宜x和y的值就可以了。


4. 实现方式:

一种方式是使用PS手动拼图;

另一种方式是使用sprite工具自动生成一个大图,并返回了每一个小图的坐标点,软件:CssGaga。


5. 使用方式:

在我们需要添加雪碧图的地方使用<i>标签(icon),然后在样式中添加:

i {
	background:url(sp.pgn);
	background-position:0 -10px;
	float:left;
	display:inline;
	width:30px;
	height:24px;
}
通过改变background-position中x和y的值来替换小图,注意x和y值都是小于等于0的值。





【HTML+CSS】CSS Sprite雪碧图

标签:css   html   

原文地址:http://blog.csdn.net/scarthr/article/details/46457051

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!