动态大小的背景大小：覆盖精灵图像

Question

我正在创建一个div，其中包含一个背景图片，使用background-size属性调整其容器的大小。目前，此div具有单独的正常和悬停状态。我正在尝试将它们组合成一个精灵，但不能让它正确显示。

这是我的代码：

.thumb {
width: 18.454%;
}

.thumb .image {
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}

.thumb img {
width: 100%;
max-size: 204px;
}

.thumb div为图像提供宽度，.image div设置背景图像，.thumb img是.image div中的img，仅用于在动态调整大小时保留图像比例。

我只需要知道如何更改背景位置：因此它可以动态运行。目前，当我使用-100％0移动图像时，它会移动，但是，它位于精灵中的错误位置。

谢谢！

Answer 1

大小调整中的错误（大约4px关闭）是由.image div line-height引起的。 这解决了这个问题。

.thumb .image {
line-height: 0; /* FIXED */
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}