雪碧图

问题

​ 比方说，当想要使用a标签实现不同点击背景时，在点击切换图片时可能会由于图片加载速度出现闪白问题。

解决方案

​ 解决图片闪烁问题，可以将多个小图片统一保存到一个大图片中，来通过调整background-position来显示图片，这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题。这个技术在网页中应用十分广泛，被称为CSS Sprite，这种图我们称为雪碧图

a:link{
    display:block;
    width:50px;
    background-image: url('./img/雪碧图.jpg');
}
a:hover{
    background-position: -50px 0;
}
a:active{
    background-position: -100px 0;
}

雪碧图使用步骤

1. 先确定要使用的图标

2. 测量图标的大小

3. 根据测量结果创建一个元素

4. 将雪碧图设置为元素的背景图片

5. 设置一个偏移量以显示正确的图片

雪碧图的特点

1. 优点
   • 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提高用户的体验
   • 减少图片的字节数，并解决了图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要分别对每一个小元素进行命名
   • 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变
2. 缺点
   • 在宽屏，高分辨率的屏幕下的自适应页面，雪碧图如果不够宽，容易出现背景断裂
   • 在开发的时候，需要通过photoshop或其他工具测量计算每一个背景单元的精确位置
   • 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要修改整张合并的图片