Question

我在将元素的OUTSIDE背景图像设置为INSIDE时遇到问题。

只要图片始终在元素的范围内，以下代码就可以在Chrome中使用：

<script type="text/javascript">
$(document).ready(function() {

    $('.title').css({backgroundPosition: '100% 100px'}).animate({
          'background-position-x': '100%',
          'background-position-y': '50%'
        }, 1000, 'linear');
});
</script>

<style type="text/css">
.title {
    width: 100%;
    height: 400px;
    background: rgba(0,0,0,0.6) url(https://www.google.co.uk/images/srpr/logo3w.png) no-repeat;
}
</style>

<div class="title"></div>

...但是，如果图像在元素边界之外开始，它会跳跃并且不会按预期工作。

HERE IS A JSFIDDLE

上面的代码在FF中根本不起作用，所以我猜我的代码肯定存在一些根本性的错误，我还没有发现。

非常感谢任何帮助。

Answer 1

你的问题是Firefox对background-position-x和background-position-y的故意无知 - 你必须在代码中使用background-position，但你不能animate()这样的分组属性。我能想到的唯一解决方案是使用两个堆叠在一起的DIV元素。

动画从元素外部到内部的背景位置

1 个答案: