使用背景大小设置背景图像动画- jsfiddle更新

Question

我正在尝试动画一个div元素的背景，并且我已经从其他人的代码中获得了动画效果。问题是背景的css属性是background-size:cover，所以它在动画中显示图像的副本，如何创建图像的水平和垂直位置的动画，并在动画完成后不显示重复的图像？有没有一段代码可以让它以我想要的方式工作，或者有没有一个插件可以做到这一点，具有背景大小的缩放效果，P.S背景必须是背景大小:封面因为有弹性的网页设计，这是代码。

jsfiddle

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: -20, temporary_y: -20}, {
duration: 350,
step: function() {
    var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
    $("#image").css({"background-position":  position, backgroundSize: 'auto !important'});
    }
});

Answer 1

我稍微修改了一下css，以防止图像重复。

#image {
 background-size: cover;
 background: url(http://ts2.mm.bing.net/th?id=H.4546305711735429&w=240&h=133&c=7&rs=1&pid=1.7) no-repeat;
 width: 240px; 
 height: 133px; 

}

这是fiddle.

希望能有所帮助。

Answer 2

我认为不使用背景图像会让你更轻松。background-size属性是一种新属性，在每个浏览器中都有不同的行为。我认为仅仅使用img元素并在鼠标悬停时缩放它会更容易一些。需要将父元素设置为overflow:hidden

Answer 3

这可以使用一个伪元素来包含背景。

它允许您将伪元素初始设置为100%大小，但在以后将其更改为您想要的任何大小。

如果你通过right和bottom属性来设置位置，那么你只需要很少的移动它(或者可能什么都不移动)。

这是CSS

#image {
    width:240px; height:133px; 
    position: relative;
    overflow: hidden;
}

#image:before {
    background-size:cover;
       background-image:url(http://ts2.mm.bing.net/th?id=H.4546305711735429&w=240&h=133&c=7&rs=1&pid=1.7);
        content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0px;
    bottom: 0px;
    transition: 0.3s all;
}

#image:hover:before {
    width: 110%;
    height: 110%;
    right: -5px;
    bottom: -5px;
}

然后Javascript就没了。

updated fiddle