如何删除背景图像溢出？

Question

我正在尝试从 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 只需单击标有“是”的按钮

Answer 1

编辑：因此，如果不重做所有代码，问题在于您没有移动 div 本身。

将 {outline: 1 px solid red;} 放入其中，您会看到它们实际上并没有移动，这就是您滚动背景的原因。除非您自己移动 div，否则隐藏溢出实际上并没有帮助。

您可以更改图像，使其下方的任何内容都已在其上。所以，溢出实际上是一个不同的图像，但它们是同一个文件。

所以，类似于|主图|下一张图|全部附上。这将使它看起来像正在拉入图像。

如果您想要更多静态显示，则必须在溢出的位置创建四个带有透明胶片的图像。

非常简单，您甚至可以使用 pxlr 在线完成。

否则，您必须为实际的 div 设置动画，而不仅仅是