精灵图
一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度....因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites/Css雪碧)
核心原理: 将网页中的一些小背景图片整合到一张大图中,这样服务器只需要一次请求就可以了...移动背景图片位置,此时可以使用background-position.
移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同,相当于第四象限....使用精灵图的时候需要精确测量,每个背景小图片的大小和位置.
其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里....我们先打开demo文件:
里面有我下载好的图标.
复制想要的图标后面的小长方形,粘贴到span中.