我想更改背景图像的位置以匹配 span 元素的数字内容。

我的html：

所以我有一个 div#ecoSlider 代表一个 400px 宽的滑动比例和一个 span#ecoPercentage 给出一个数值。我想从跨度中获取该值并应用于我的背景位置。

到目前为止我的 jQuery：

我似乎无法正常工作，我做错了什么？

提前谢谢了。

我想使用悬停功能更改按钮的背景图像 y 位置。有没有一种简单的方法来保持 xpos 或者我应该先获得位置，将其拆分并再次与 $.css() 一起使用。

如果有人悬停其中任何一个，我应该更改所有 3 个跨度的背景位置。所以 bt_first:hover 似乎不可用。

这是我的用法。我写了#should stay same#来放置我不想改变xpos的值：

这是我的html。：

和CSS：

混合 1 查看我网站的源代码和 19 个字节浪费字母的字符background-position，用于精灵图标的位置，你会感觉到我对这个长词有点沮丧：

background-position

单独使用它很好，但是当设置数百个精灵图标时，它只是浪费字节。所以我的问题是：有没有更聪明的速记可以代替这个长词？如果是这样，它将为我节省一半的页面字节数！

只需在下面的图片中看看它的疯狂......

干杯和非常感谢！

更新：

请注意，每个图标都有自己独特的图标和独特的背景偏移。

我似乎无法让这个工作。

高度和宽度动画但不是背景。

我遇到了一个问题，即居中对齐并垂直重复的背景图像仅在“最新新闻”页面上中断。

我似乎无法找到它为什么会中断，特别是因为它在网站内的所有其他页面上都很好，并且页面中没有大小不同的部分等。

我已经使用萤火虫检查了页面的各个方面，但仍然找不到导致问题的原因，任何帮助将不胜感激。

当我将鼠标悬停在图像上时，我正在使用更改图像的背景位置方法。这对我来说在 FF、Chrome 和 Safari 中运行良好，但在 IE8 中却不行。背景图像是一个包含 Alpha 透明度的 .png。我已经通过 W3C 验证器运行了我的代码并且它是有效的，所以我不应该使用兼容模式。

这是相关的html代码片段：

以及相关的CSS：

帮助？

我在很多网站上都看到过这个技巧，我想将它用于我自己的项目。
我有一个background.jpg非常大的图像，只是为任何屏幕尺寸做好准备。
我希望将背景图像居中到访问者的窗口。
我的意思是，在滚动窗口内容时会移动，但背景会保持原位 - 垂直和水平居中。

顺便说一句，大多数观众都会有旧的蹩脚PC，所以最好不要闪烁，如果是JS的话。

我得到这个背景图像滑块的东西在 chrome 和 safari 中工作，但它在 Firefox 中没有做任何事情。有什么帮助吗？

我也试过这个，但它什么也没做

我可以在背景中重复图像的一部分[它在 CSS 精灵图像中]？！

例如：

背景位置：-13px 顶部；背景重复：重复-y；

因为我重复了整个精灵图像......

这个问题有点难以解释。

我正在使用 PNG sprite 来制作 48x48px 图标并按类移动背景。

例如，

（对于不同的图标，还有大约 35 个这样的背景位置移动类。）

问题是无论我是否将 bino、sale、cart 或其他 36 个图标中的任何一个作为 Icon 类之后的第二个类，我仍然只是获得位于 PNG 文件的 0px、0px 处的背景图像.

奇怪的部分是它在 Dreamweaver 设计视图中完美显示，但是当我进入实时视图或在 Chrome/Safari 等中预览时，图标全部切换到默认图标而不是移动。

Chrome 中的开发人员工具显示 background-position 属性已正确移动，但在视觉上，图标不正确。

澄清一下，我之前已经成功使用过这种技术很多次，没有任何问题——我猜只是度过了糟糕的一天。

有任何想法吗？