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

css切图Sprites

时间:2016-01-30 02:01:58      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

CSS Sprites其实就是把网页中一些图标整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

优点:减少网页http请求,提高页面性能,降低服务器负载;文件命名减少麻烦。

缺点:定位繁琐,布局固定,降低网页弹性。

直接用winwods的画图工具就能够查看需要的位置(记得要放在所需切完的图片左上角)的xy值,取值范围是(-无穷,0),单位px。

div的width和height值是你要显示的区域的长和高,background-position:X Y的值就是鼠标放到你要显示的小图标的左上角

的横坐标和纵坐标,特别注意:有负号。

 

css切图Sprites

标签:

原文地址:http://www.cnblogs.com/milude0161/p/5170018.html

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