问题标签 [background-position]

任何人都知道为什么以下内容不起作用。如果我只是直接设置 css 而没有动画，它就可以工作。//div.css( {backgroundPosition: "bottom left"} );

我的目标是拥有一个横跨整个浏览器窗口的图像栏，并且无论用户如何调整窗口都保持居中。这很容易，但我还想要图像定期向右滚动，在一个恒定的循环中，同时仍然保持“居中”。

现在我正在尝试使用背景图像来完成此操作，因为我可以在不创建滚动条的情况下使图像尽可能宽。加上内置的横向重复css能力是实现“循环”效果的简单方法。

我正在使用以下 jquery 代码为背景图像设置动画：

不幸的是，此代码触发的第二个背景不再居中，并且在调整浏览器窗口时不再与站点的其余内容同步移动。我是否错过了一个简单的 css/jquery 命令，可以使背景图像与其余内容保持同步，同时仍将其向右移动？

我在 IE 中遇到问题，只有灵活/流畅布局中元素的背景图像。

基本上，我需要背景图像（1px x 1px）垂直平铺。当布局为全宽时，背景图像位于距左侧 676 像素的位置，转换为百分比时等于70.56367 % ( 676px divide by it's container of 958px)。

这在Firefox、Chrome和Safari中运行良好，但在任何IE（6,7 和 8）中都不起作用。只有当百分比是一个完整的数字而不是一个分数时，背景位置似乎才起作用。当设置为 70% 或 71% 等时，背景位置会发生变化。

这是我所拥有的以及它在浏览器中的显示方式：

我还尝试将背景位置设置为单独的 X 和 Y 值（虽然结果相同）：

火狐（v3.6.3）：

铬（12.0.742.100）：

野生动物园（5.0.2）：

Internet Explorer（6、7 和 8 - 结果都一样）：

所以我的问题是，这只是浏览器无法计算不完整百分比的 IE 问题吗？或者，是否有修复或我缺少的东西？

我在 asp.net 中有一个图像组件，如下所示：

如您所见，我为这张图片设置了宽度和高度，但是通过这样做，face-images.jpg (3*170 = 510 * 191) 在元素区域中被拉伸了！
但我不想要这种行为，因为 face-images.jpg 里面包含 3 张图像（170*191），我想用 css 和 jquery 控制它们的定位！
我知道我们可以通过 div 元素来完成这项工作-> 但是 asp.net 的图像组件呢！
渲染后的图像如下（html）：

但为什么下面的 css 不适用于此图像：

或者

或者

我们可以通过备用 div 解决这个问题 - > 但是这样我们会丢失 alt 文本，我认为这对SEO
很重要 ，提前谢谢

我想创建一个流体/灵活的弯曲角盒。理想情况下，它应该是通用的，因此内容可以出现在盒子的顶部/底部。

按理说，我应该能够使用 4 个元素（div）和一个图像。我几乎可以在所有浏览器中使用它——除了 IE6。

我已经从http://www.schillmania.com/projects/dialog2/basic.html修改了代码， 所以我有以下标记和 css；

我使用了一个大的单框图像（2000px H/W）。这种方法的想法是我可以使用 alpha 透明度（角落、阴影等），没有重叠等。

.

问题是IE6；它拒绝做任何类似于背景图像垂直定位的事情。我什至尝试将前 2 个 div（.tl 和 .tr）的背景位置从顶部更改为 50%，但在 IE6 中，它保持在 0。

我尝试过使用完整/长手背景属性（背景图像/背景重复/背景位置），并且我尝试过 x/y 版本（背景位置-x/背景位置-y）等。

似乎如果我使用 _height: 或 _overflow-y: 属性使 IE 拉伸所需的高度，它会削弱其垂直定位图像的能力。

我怎样才能做到这一点？

我的问题是为什么我不能在 gif 上更进一步并选择 position: -60px。我一直在尝试任何幸运...有什么建议吗？我想在 jsFiddle 上向您展示这个，但不知道如何将 gif 上传到网站。

CSS

我有一个网站，在我的一个页面中，我使用了一个看起来像编辑器的 div。我可以在这个 div 和上面的内容中有一个背景。当我在 div 中滚动时，我希望这个背景保持在一个固定的位置。

我的代码与此类似：

当我在 div 内滚动时，背景保持固定并且工作正常。问题是当我滚动整个页面时它正在移动。

有谁知道可能是什么问题？

提前致谢

I am trying to animate the background of an element from it's current position when the user clicks a button. I am able to do this on the first click but the subsequent clicks fail.

Here's my code...

EDIT:

As suggested below, this works great unless you're using IE where it resets back to 0 at each click then animates again.

Here's a link to what I mean... http://jsfiddle.net/TdaSV/

Solution (as a result of being pushed in the right direction):

我想通过使用 CSS 精灵来改进 jQuery 的对话框代码，从而添加对话框边框的动画。

为此，我希望所有艺术品都在 1 个 png 文件中，即一个 css 精灵。

我的问题是，为了支持最大化 2 或 3 个显示器的对话框，我想我必须在 css sprite 文件中放置 5000px 宽/高边框图形。因为我找不到调整css sprite图像选定部分大小的方法。

基本上，我想将精灵图像中的区域（t，l，w，h）调整为页面上具有不同宽度和高度的 DIV 或 IMG。我想知道，这甚至可能吗？似乎背景位置根本不支持这一点。

我已经尝试了如何在 CSS sprite 中缩放图像中的第一个解决方案，但无法使用它来工作。

我已经尝试将新的 background-size 属性与 background-position 结合使用，但这也不会产生我想要的结果。

在这个页面上，我一直在努力，我有一个标题为“Bid x Ask”的专栏：http ://www.sellmycalls.com/so-bg-pos.png

在每个单元格背景中，应该有一个条形图，用于传达单元格中数字之间的比率。

所以在每个单元格中我都有一个背景颜色：灰色；和背景图像：全白；。我无法在灰色背景上正确定位（足够大）图像。事实上，在它目前的化身中，图像根本没有出现。

如何正确设置图像的背景位置？列中顶部的 <td> 的样式是这样的：

非常感谢你的帮助！