我试图从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