很早就知道这个技术,但是正式应用在最近
为避免浏览器多次加载图片,我们把一些图片拼接在一起,应用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坐标变为负值,越来越小。