icon如何使用
日期：2014-05-16 浏览次数：20668 次
icon怎么使用
有没有大神指导下，类似这种图标文件怎么使用？万分感谢
------解决方案--------------------
图片左上角是0,0
position就是相对于左上角的偏移像素
你这图片是480*1140,共计10*30个图标，平均每个图标占48px*48px的空间，
那么：
第一排第一个的图标的偏移量就是0,0，即background-position：0,0
第一排第二个的图标的偏移量就是48px,0,即background-position：-48px,0
第一排第三个的图标的偏移量就是96px,0,即background-position：-96px,0
....
第二排第一个的图标的偏移量就是0,48px，即background-position：0,-48px
第二排第二个的图标的偏移量就是48px,48px,即background-position：-48px,-48px
第二排第三个的图标的偏移量就是96px,48px,即background-position：-96px,-48px
...
依此类推
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{float:left;width:48px;height:48px;background:url("http://img.bbs.csdn.net/upload/201404/22/1398125962_718161.png") no-repeat;}
.x0yo{background-position:0 0;}
.x48y0{background-position:-48px 0;}
.x96y0{background-position:-96px 0;}
.x0y48{background-position:0 -48px;}
.x48y48{background-position:-48px -48px;}
.x96y48{background-position:-96px -48px;}
</style>
</head>
<body>
<div class="x0y0"></div><div class="x48y0"></div><div class="x96y0"></div>
<div style="clear:both;height:0px;line-height:0px;"></div>
<div class="x0y48"></div><div class="x48y48"></div><div class="x96y48"></div>
</body>
</html>
有没有大神指导下，类似这种图标文件怎么使用？万分感谢
------解决方案--------------------
图片左上角是0,0
position就是相对于左上角的偏移像素
你这图片是480*1140,共计10*30个图标，平均每个图标占48px*48px的空间，
那么：
第一排第一个的图标的偏移量就是0,0，即background-position：0,0
第一排第二个的图标的偏移量就是48px,0,即background-position：-48px,0
第一排第三个的图标的偏移量就是96px,0,即background-position：-96px,0
....
第二排第一个的图标的偏移量就是0,48px，即background-position：0,-48px
第二排第二个的图标的偏移量就是48px,48px,即background-position：-48px,-48px
第二排第三个的图标的偏移量就是96px,48px,即background-position：-96px,-48px
...
依此类推
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{float:left;width:48px;height:48px;background:url("http://img.bbs.csdn.net/upload/201404/22/1398125962_718161.png") no-repeat;}
.x0yo{background-position:0 0;}
.x48y0{background-position:-48px 0;}
.x96y0{background-position:-96px 0;}
.x0y48{background-position:0 -48px;}
.x48y48{background-position:-48px -48px;}
.x96y48{background-position:-96px -48px;}
</style>
</head>
<body>
<div class="x0y0"></div><div class="x48y0"></div><div class="x96y0"></div>
<div style="clear:both;height:0px;line-height:0px;"></div>
<div class="x0y48"></div><div class="x48y48"></div><div class="x96y48"></div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
