Question

我有两个背景：

body {
    background-image: url(img/nemo.png),url(img/ocean.png);
}

如何使nemo.png background从左右无限移动但不影响ocean.png background？

编辑：当他到达最右边（并且图像不再可见）时，他将再次从左边缘出现并开始从左到右进行漂移。 / p>

Answer 1

这可以使用纯CSS 3来完成，例如keyframed animations：

演示：http://jsfiddle.net/dghsV/112

body {
    background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%, 0;
    -moz-animation: swim 2s linear 0s infinite;
    -webkit-animation: swim 2s linear 0s infinite;
    animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

语法

animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

该功能是实验性的，因此必须添加供应商前缀（例如-webkit-）（有关兼容性说明，另请参阅Can I use CSS3 Animation）。在我的演示中，我使用了所有属性，除了最后一个属性。

Answer 2

这是一个选项：

从nemo.png创建一个动画GIF，这是一个从左到右移动的图像的简单动画。

然后通过将ocean.png设置为页面body的背景来创建分层背景。

然后使用以下css创建div：

width:100%; 
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);

div将是包含所有内容的无所不包的容器，可为您提供分层的背景效果。

Answer 3

只将海洋作为背景，并以nemo为背景创建一个div：

<div id="nemo"></div>

#nemo {
    background: url(nemo.png) no-repeat;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 0px;
    top: 500px;
    z-index:-10;
}

你可以使用javascript（jQuery）为这个div设置动画：

<script type="text/javascript">
    $(document).ready(function() {
        SwimRight();
    });

//duration is in ms
function SwimRight() {
     $('#nemo').css({positionLeft: 0});
     $('#nemo').animate(
          { left: $(document).width() },
          { duration: 5000,
          easing: normal,
          queue: true, 
          complete: SwimRight}
     );
</script>

使用CSS无限移动多个背景

3 个答案:

演示：http://jsfiddle.net/dghsV/112

语法