问题标签 [background-position]

我不经常使用背景位置，所以也许我没有正确执行此操作，但我的 css 规则没有生效。

background-position:right 353px bottom 20px;

这是代码：

HTML

CSS

编辑

它发生在我身上，也许我应该描述我正在努力完成的事情。

在我的 h1 中，我有一个徽标（宽度 353）。
根据屏幕尺寸，h1 可能会大于 353。

在这种情况下，我希望将背景图像显示在与 img 相邻（左侧）的位置，以便它很好地淡入纯色背景色。

我有一个带有and和and的<ul>元素。list-style:none;<li>padding:20px;background-image:url(images/bullet.gif) no-repeat -20px 10px;

子弹不可见。我现在使用的解决方法是 0 而不是 -20px 用于 background-position 和<li>element position:relative;padding-left:20px;margin-left:-20px;。

有没有更好的方法来做到这一点？

编辑：我需要子弹在<ul>盒子外面。这就是使用负边距的原因。

谢谢你。

我试图让 jquery 在 DIV 图像背景的位置上进行动画处理。我使用http://keith-wood.name/backgroundPos.html来做这个效果。动画在 x 轴上滑动，位置如下：

1. 0
2. 50
3. 80
4. 110
5. 70
6. 50

它工作正常，但在 IE8 上，它首先转到 x 位置 0，然后转到正确的位置。例如在第 4 步中，它从 0 开始，并将幻灯片动画制作到 110。这是错误的，因为它应该从 80 开始。

我怎样才能解决这个问题？

我在这里看到 jquery 1.5.0中缺少backgroundPosition动画是一个已知的错误。还是没有修好？

看到这个jsfiddle，在 jquery 1.4.4 中带有backgroundPosition动画，然后看看这个，发现它甚至在 jquery 1.7.1 中也不起作用。

知道他们什么时候会解决这个问题吗？

我想知道，因为我刚刚在我的 Chrome 控制台中看到一个警告说：

event.layerX 和 event.layerY 在 WebKit 中被破坏和弃用。它们将在不久的将来从引擎中移除。

我担心我会继续使用 jquery 1.4.4 来制作动画功能，但 Chrome 会在下一次更新中拉取该功能。

更新

接受的答案，使用 background-position-x 和 y 的想法不适用于 Firefox。现在我将不得不回到 1.4.4，直到找到更好的解决方案。

我怎么把它放在一起？我正在这个网站上工作，该网站要求每次单击菜单中的一个项目时，两个特定 DIV 的背景位置都会更改并保留选择。

这是我的尝试：

首先，我创建一个变量“p”来保存所选页面的 url/地址，例如，如果您在 about us，您可能会在地址栏上看到类似这样的内容：

website.com/index.php?p=aboutus

在菜单上，在关于我们的按钮上，我通过调用函数 changeBG onClick 来做到这一点：

我想我需要 javascript 来解决这个问题，这就是我的存货。

这是标题中的脚本：

这是身体上发生的事情：

谁能发现为什么这不起作用？

对于有问题的行为，请尝试调整此 Web 应用程序的窗口大小。认为标题和框在最小尺寸后停止调整大小，背景图像继续将自己定位在页面的中心，这看起来真的很愚蠢。

下面是背景图片的相关代码：

即使 background-position 没有消除最小宽度和高度（即，窗口将在预定尺寸后停止调整大小，但它继续将背景图像居中。

为什么要这样做？如何防止图像在某个特定点后重新居中？

我有一个元素（一个按钮），我想要 2 个背景图像。一个是渐变，我希望另一个位于按钮上方。我怎么做？

有什么方法可以添加类似margin-top的东西：-20px; 或类似的东西？

我需要使用 jQuery 为元素的背景位置属性设置动画。通过遵循使用默认 jQuery 动画功能的本教程，我没有运气。

http://snook.ca/archives/javascript/jquery-bg-image-animations

我的功能是：

我没有运气，所以我尝试编写自己的函数，改变元素的垂直背景位置。看起来像：

要将元素的 Y 背景位置设置为 -900，我这样调用函数：

请注意，这里的变量now（背景位置 Y）在step:中将从 0 减小到 -900。

这很好用，但我的问题来了。在此之后，我需要直接使用 jQuery .css() 函数将此背景位置重置为“0px 0px”，然后再次对其进行动画处理，如下所示：

在这种情况下，当我将背景位置重置为“0px 0px”时，参数现在应该从 0 变为 300，但它从 -900 变为 300，其中 -900 是我在调用函数时设置的值。

任何人都知道出了什么问题，或者我如何重置此参数以便每次都采用正确的值？

我有另一个类似的函数，它可以旋转改变 CSS3 属性变换的元素 - 旋转，我也有同样的问题。

谢谢你的帮助！

我有这个简单的 HTML：

和一些Javascript：

因此，当鼠标悬停时，该功能正常工作，虽然动画不是那么完美，而且几乎看不到缓动。但是当鼠标悬停时，该功能不起作用，背景图像就坐在那里，即使在像素上也不会移动......

有什么问题？我错过了什么？

或者：

这仅适用于 Chrome...

所以又是什么问题！什么错误！我有什么想念的？！

我是 jQuery 的新手，我在尝试让某些东西正常工作时遇到了一些麻烦。

基本上我有一个 wordpress 网站，每个页面上都有不同的body标签背景图片。我希望能够切换一个按钮，然后将主体背景图像下降约 500 像素。

基本上我的页面顶部有一个隐藏的联系区域，当您单击按钮 ( a.contact) 时，隐藏的联系区域 ( #contactArea) 通过从顶部下拉显示，但是当联系区域下降时，我的一些背景图像被隐藏直到您再次单击该按钮。

我想要实现的是，当隐藏的contactArea 被显示时，背景图像会下降（仍然完全可见），以便背景图像始终可见。我希望这是有道理的？！

我的CSS代码是：

我当前的 jquery 是：

如果有人可以提供帮助，将不胜感激！:-)