如何清除背景圖片溢出？

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

編輯按鈕：所以，沒有重做所有的代碼，問題是，你並不是在移動divs自己。

將{outline：1 px solid red;}放在它們中，您會看到它們實際上並未移動，這就是您在背景中滾動的原因。隱藏你的溢出實際上並沒有幫助，除非你移動divs自己，你不是。

你可以改變圖像，以便任何你想要的圖像已經在它上面。所以，溢出實際上是一個不同的圖像，但他們會是同一個文件。

所以，類似的東西|主圖片|下一張圖片|全部附上。這將使它看起來像圖像被拉入。

如果你想要更多的靜態顯示，你將不得不創建四個圖像與溢價將透明度。

這很容易，你甚至可以在線與pxlr做。

否則，你必須動畫實際的divs而不僅僅是