用背景大小为背景图像制作动画-jsfiddle更新

Question

我正在尝试对div元素的背景进行动画处理，并且已经将其从其他人的代码中进行动画处理。 问题是背景的css属性是background-size：cover，因此它在动画中显示该图像的副本，我如何创建图像的水平和垂直位置的动画，并且动画后没有重复的图像显示完成了吗 是否有一段代码可以使其按我想要的方式工作，或者是否有一个插件可以做到这一点，并且对背景大小具有缩放效果，所以PS的背景必须为background-size：cover因为弹性网页设计，这是代码。

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; 

}

这是小提琴。

希望能帮助到你。

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不见了。

更新的小提琴