css 雪碧图的总结

很早就知道这个技术，但是正式应用在最近

为避免浏览器多次加载图片，我们把一些图片拼接在一起，应用background-position来设置背景图片的显示和更换（鼠标经过）

以下为我正在学习应用的总结，个人见解和认知，有不正确的地请多多指教。

1.必须为需要展现的图片设定大小；

2.接下来我们来举个例子（如下图）：你需要的两张图处于拼接图的最上面的左侧和右侧

<div class="handle" style=“width="166" height="166" ”></div>

.handle {background-position:0,0;}

.handle:hover {background-position:-166px,0;}



总结：当你需要展示蓝色边框图片是 X坐标变为负值，越往右越小

当你需要展示纵向的图标式，Y坐标变为负值，越来越小。