Webkit的背景

Question

将webkit动画应用于整个背景图像（而不是内容）的正确代码是什么？

EX：

body {
    background-color: #FFF;
    background-image: url(bgsuper.jpg);
    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

谢谢！

Answer 1

我在一起伪装背景：

<img id="pseudo-background" src="..." alt="You need me" />

它的工作方式与普通背景类似，但不会平铺。如果您需要平铺，请使用<div>属性制作background并使用该属性。

<强> HTML ：

<img src="..." id="pseudo-background" alt="foo" />

I work, see!

<强> CSS ：

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

#pseudo-background {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;

    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;

}

并且，演示：http://jsfiddle.net/4z6TS/3/