sprite - 动态调整大小的背景大小：覆盖 Sprite Image

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 行高引起的。这解决了问题。

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