Question

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

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％大小，但不会将其更改为您想要的任何大小。

如果您通过右侧和底部属性设置位置，那么您需要移动它很少（或者可能根本没有）。

这是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

动画背景图像与背景大小 - jsfiddle更新

3 个答案: