Question

我试图将2个图像1叠加在另一个上面并使它们使用css无限滚动。我能够使图像滚动但不能将它们一个叠在另一个上面并以不同的速度滚动以创建效果。

我的css：

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

#animate-area   { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;

    animation: animatedBackground 135s linear infinite;
}

#animate-area2  { 
    width: 100vw; 
    height: 100vw; 
    background-image: url(http://oi67.tinypic.com/2niy905.jpg);

    background-repeat: repeat-x;
  position: relative;
    animation: animatedBackground 80s linear infinite;
}

和我的HTML：

<div id="animate-area"></div>
<div id="animate-area2"></div>

JSFiddle

Answer 1

我能够通过将style="position:absolute;z-index:0;"添加到第一个div并将position:absolute;z-index:1;添加到第二个div来解决这个问题，然后将它们分层放在彼此之上

Answer 2

相对于绝对位置改变位置。并且还使用z-index 1和2作为主题。 :)

package main

import "fmt"

func main() {
    var row, col int
    fmt.Print("enter rows cols: ")
    fmt.Scan(&row, &col)

    // allocate composed 2d array
    a := make([][]int, row)
    for i := range a {
        a[i] = make([]int, col)
    }

    // array elements initialized to 0
    fmt.Println("a[0][0] =", a[0][0])

    // assign
    a[row-1][col-1] = 7

    // retrieve
    fmt.Printf("a[%d][%d] = %d\n", row-1, col-1, a[row-1][col-1])

    // remove only reference
    a = nil
    // memory allocated earlier with make can now be garbage collected.
}

如何将图像叠加在另一个上面并使用css进行无限滚动？

2 个答案: