雪碧图应用

  • 将多张图片组合在一起，形成一张图片，减少请求服务器的次数，优化网页

  • 原理：通过背景样式background-image和background-position来实现雪碧图效果

  • 步骤：

    1.设置一个宽高刚好显示指定图标大小的标签（盒子）

    2.通过background-image引入雪碧图

    3.再通过background-position来实现雪碧图的显示位置，调整到指定图标

  • 注意：在开发过程中，x轴的正方向是水平向右，y轴的正方向是垂直向下