html背景图片溢出,如何清除背景图片溢出？

我试图从div中的背景图像中删除溢出。我有4个相同图像的div创建一个背景图像(我定位每个图像，以便它匹配4个div)。基本上我试图给左边的“奇异”图像制作动画，并用另一幅图像在相同的动画中替换它(这实际上只是一个CSS转换)。问题是overflow：hidden隐藏了溢出，但是当你将它移动到左边时，你会看到隐藏图像的其余部分。如何清除背景图片溢出？

是否有任何方法来剪辑或删除溢出，使我的过渡看起来像一个图像移动到左边？

的CSS

.changeOver{

background-repeat: no-repeat;

background-position:130% !important;

-webkit-transition: 2s;

-moz-transition: 2s;

-o-transition: 2s;

transition: 2s;}

脚本

$('#change').click(function() {

$('#fourth').addClass('changeOver');

setTimeout(function(){

$('#fourth').css('background-image', 'none');

}, 5000);

setTimeout(function(){

$('#fourth').css('background-color', 'blue');

}, 1);

setTimeout(function(){

$('#third').addClass('changeOver');

setTimeout(function(){

$('#third').css('background-image', 'none');

}, 5000);

setTimeout(function(){

$('#third').css('background-color', 'blue');

}, 1);

}, 2000);

setTimeout(function(){

$('#second').addClass('changeOver');

setTimeout(function(){

$('#second').css('background-image', 'none');

}, 5000);

setTimeout(function(){

$('#second').css('background-color', 'blue');

}, 1);

}, 4000);

setTimeout(function(){

$('#first').addClass('changeOver');

setTimeout(function(){

$('#first').css('background-image', 'none');

}, 2000);

setTimeout(function(){

$('#first').css('background-color', 'blue');

}, 1);

}, 6000);

});

2015-03-30

grotesqu

+0

欢迎来到StackOverflow！请务必阅读我们的[问]页面，以帮助您制定一个很好的问题。如果你在你的问题上付出了一些努力，你更有可能从社区得到一个很好的答案。此外，它可以帮助您创建MCVE (http://stackoverflow.com/help/mcve)并将其添加到您的问题 –

2015-03-30 22:34:31