Html 如何在精灵表动画中设置背景位置值？

我编写了以下代码：

正文{
背景：#24aecd；
}
#怪兽{
宽度：190px；
高度：290px；
利润率：2%自动；
背景：url（'http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png")左中,；
动画：播放。8s步（10）无限；
}
@关键帧播放{
100% {
背景位置：-1900px；
}
}

页面标题

怪物的高度应该是240像素，而不是290像素

正文{
背景：#24aecd；
}
#怪兽{
宽度：190px；
高度：240px；
利润率：2%自动；
背景：url（'http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png")左中,；
动画：播放。8s步（10）无限；
}
@关键帧播放{
100% {
背景位置：-1900px；
}
}

页面标题

“但当我更改背景位置时，它无法正常工作。”——在您的情况下，不应更改

播放

关键帧中的

背景位置

，值1900px正是背景图像的宽度。以下是对整个动画的解释：

动画由一个大背景图像（）实现。如果下载并打开此图像，它由10个单独的小图像（水平）组成，每个图像在动画中占1帧

默认情况下，将显示最左边的帧图像（

monster

的

background

属性中的

left

）

定义一个动画，使用10帧和0.8s周期，无限播放。动画的效果是将背景图像向左移动，每一步一帧图像（-1900px/10=-190px，190px是一帧图像的宽度）。显示所有10帧图像后，

背景位置

将为-1900px（

100%

在关键帧中），随着背景图像的重复，新一轮将开始

background-repeat-x

对于此动画是必需的，否则无法无限地设置动画。然而，

background-repeat-y

应该是

no repeat

，以获得更好的效果

如果要更改动画背景图像，并更改相应的

背景位置

，可以应用类似的计算--将单独的帧合成为一幅图像，将

100%

关键帧设置为合成图像的负宽度，最后定义CSS动画

更新：

对于评论中提到的示例sprite图像，其宽度为612px，由6帧组成，因此一帧的宽度为102px。代码段应该是：

怪物{ 宽度：102px； 高度：200px； 保证金：0自动； 背景：url（'https://lh3.googleusercontent.com/proxy/hCmcllpdGXPzzIkEQxUf8EEkl2Tc9WqLu4D9JIAbPtmLpb5Fx0H7DG2yojnZ-rRNt8XXsM-xBGEWrPijzLnVZUpZbAnWTNui9TLjwdzm2R_PFdwwhVh0jV0=w612-h148左中； 动画：播放。8s步（6）无限； 背景重复y：无重复； } @关键帧播放{ 100% { 背景位置：-612px； } }

---

你能解释或展示一下你到底想要什么吗？对我们来说，它充满活力，看起来不错。您没有提到您期望的输出。如果添加

background repeat:no repeat这看起来很完美首先我要感谢你。你的意思是我必须将一张图像的宽度乘以精灵表中的图像数量，然后我必须将该数字作为负数写在背景位置。如果是，请告诉我如何知道一个窗口的宽度image@rohitsingh对于单个帧的图像，如果它是一个已存在的图像，我认为您可以使用任何图像查看器/编辑器来检查其大小。如果你需要自己制作，宽度取决于你想显示动画的大小。你没有回答我的第一个问题背景位置：-（一帧的宽度*帧数）。我说得对吗？请推荐一个图像查看器