我正在尝试从 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);
});
编辑:Here's the jsfiddle只需单击标有"is"的按钮
最佳答案
编辑:因此,在不重做所有代码的情况下,问题是您没有移动 div 本身。
将 {outline: 1 px solid red;} 放入其中,您会发现它们实际上并没有移动,这就是您在背景中滚动的原因。隐藏你的溢出实际上没有帮助,除非你自己移动 div,而你不是。
您可以更改图像,以便在图像下方显示您想要的任何内容。所以,溢出实际上是不同的图像,但它们是同一个文件。
所以,类似于|主图|下图|全部附上。这将使图像看起来像是被拉入。
如果您想要更多的静态展示,则必须在溢出的地方创建四张透明胶片图像。
这非常简单,您甚至可以使用 pxlr 在线完成。
否则,您必须为实际的 div 设置动画,而不仅仅是
关于javascript - 如何删除背景图像溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29357535/