CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易....因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites/Css雪碧)
核心原理: 将网页中的一些小背景图片整合到一张大图中,这样服务器只需要一次请求就可以了...移动背景图片位置,此时可以使用background-position.
移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同,相当于第四象限....其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里.
下面做一个案例,使用下面的字母图,用精灵图的方式将自己的名字拼出来
<!...精灵图是由诸多优点的,但是缺点很明显:
1.图片文件还是比较大的.
2.图片本身放大和缩小会失真.
3.一旦图片制作完毕想要更换非常复杂.