Question

我正在尝试从div中的背景图像中删除溢出。我有4个具有相同图像的div，可以创建一个背景图像（我将每个图像定位，使其匹配4个div）。基本上我正试图将“奇异”图像设置为左侧动画，并让另一个图像在同一动画中替换它（这实际上只是一个css过渡）。问题是溢出：隐藏了隐藏溢出，但当你向左移动它时，你会看到隐藏图像的其余部分。

有没有办法剪辑或删除溢出，以便我的过渡看起来像一个图像向左移动？

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设置动画，而不仅仅是

如何删除背景图像溢出？

1 个答案: