CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易....移动背景图片位置,此时可以使用background-position.
移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同,相当于第四象限....因为一般情况下都是往上往左移动,所以数值是负值.
使用精灵图的时候需要精确测量,每个背景小图片的大小和位置....其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里.
下面做一个案例,使用下面的字母图,用精灵图的方式将自己的名字拼出来
<!...精灵图是由诸多优点的,但是缺点很明显:
1.图片文件还是比较大的.
2.图片本身放大和缩小会失真.
3.一旦图片制作完毕想要更换非常复杂.