1.css精灵图:处理网页背景图像的方式。将所有零散的小图集中到一张大图中,然后将大图应用到网页,这时只需向服务器发送一次请求即可。
2.定位到精灵图中具体某个小图的位置使用:background-images、background-repeat、background-position
属性来进行背景图像定位。
※x,y为距左上边框顶部的距离
<head>
<style type="text/css">
.box{
width:24px;
height:22px;
background:url("tbbg.png") 0 -45px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
※精准的得到精灵图中小图的大小和位置:
先用选框框一个小图—然后右键“通过剪切新建位图”—窗口,打开层—选中新建的此位图,关闭层。
精灵图制作
fireworks—新建文档—画布颜色:透明—靠一边放置—保存为png格式文件