最近项目做首页，上面很多图片导航需要hover效果，使用css的:hover选择器发现加载hover图片时会闪烁，想着应该是请求hover图片的加载时间造成的，后来根据雪碧图的原理完美解决，把两张图片合成一张图片，然后用background-position来控制显示的位置，从而实现hover效果。实现如下：

background-position 属性设置背景图像的起始位置。

 <div class="home-btn"></div>

.home-btn {
  background-image: url("~static/img/home/按钮.png");
  height: 90px;
  width: 358px;
  margin-top: 100px;
  margin-left: 600px;
}
.home-btn:hover {
  background-position: 0px -90px;
}

将div宽高设置为原来一张图的大小 height: 90px，width: 358px;